<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>宅鱼</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google-site-verification" content="yH7MwnMb7LXru16F4FAfY94pn-oZLhF8Szu4PuL7Oxw" />
  <meta name="description" content="前端，技术，博客，记录，javascript，html5，css">
<meta property="og:type" content="website">
<meta property="og:title" content="宅鱼">
<meta property="og:url" content="http://ikkkr.com/page/10/index.html">
<meta property="og:site_name" content="宅鱼">
<meta property="og:description" content="前端，技术，博客，记录，javascript，html5，css">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="宅鱼">
<meta name="twitter:description" content="前端，技术，博客，记录，javascript，html5，css">
  
    <link rel="alternative" href="/atom.xml" title="宅鱼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico"  type="image/x-ico">
   
  <link rel="stylesheet" href="/css/style.css">
  

</head>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">宅鱼</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">部落格</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">首页</a>
        
          <a class="main-nav-link" href="/archives">文章</a>
        
          <a class="main-nav-link" href="/raincss">RainCSS</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://ikkkr.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-e5-af-b9schema-e5-90-ab-e4-b9-89-e7-9a-84-e7-90-86-e8-a7-a3-the-cognition-of-schemas-meaning" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/07/14/e5-af-b9schema-e5-90-ab-e4-b9-89-e7-9a-84-e7-90-86-e8-a7-a3-the-cognition-of-schemas-meaning/" class="article-date">
  <time datetime="2011-07-14T14:49:43.000Z" itemprop="datePublished">2011-07-14</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/web-development/">web development</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/07/14/e5-af-b9schema-e5-90-ab-e4-b9-89-e7-9a-84-e7-90-86-e8-a7-a3-the-cognition-of-schemas-meaning/">对schema含义的理解_The cognition of Schema&#39;s meaning</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>在xml开发,数据库开发,w3c的规范文档中出现最多的一个单词是schema,其翻译过来的意思是:模式,计划,图解,概要.但在开发过程中, 个人感觉它似乎还有模板,语言规范,方案的意思.所以仔细的查了一下,在wiki当中有很详细的说明:The word schema comes  from the Greek word “σχήμα” (skhēma), which means shape, or more  generally, plan.原文如下:</p>
<p>The word <strong>schema</strong> comes from the Greek word “σχήμα” (skhēma), which means <em>shape,</em> or more generally, <em>plan</em>. The plural is “σχήματα” (skhēmata). In English, both <em>schemas</em> and <em>schemata</em> are used as plural forms.</p>
<p><strong>Schema</strong> may refer to:</p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Conceptual_model" title="Conceptual model" target="_blank" rel="noopener">Model (abstract)</a></li>
<li><p><a href="http://en.wikipedia.org/wiki/Diagram" title="Diagram" target="_blank" rel="noopener">Diagram</a></p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Schematic" title="Schematic" target="_blank" rel="noopener">Schematic</a>, a diagram that represents the elements of a system using abstract, graphic symbols<br>In <strong>computer science</strong>:</li>
</ul>
</li>
<li><p><a href="http://en.wikipedia.org/wiki/XML_schema" title="XML schema" target="_blank" rel="noopener">XML schema</a>, a way to define the structure, content and, to some extent, the semantics of XML documents</p>
</li>
<li><a href="http://en.wikipedia.org/wiki/Database_schema" title="Database schema" target="_blank" rel="noopener">Database schema</a></li>
<li><a href="http://en.wikipedia.org/wiki/Schema_%28genetic_algorithms%29" title="Schema (genetic algorithms)" target="_blank" rel="noopener">Schema (genetic algorithms)</a>, a set of programs or bit strings that have some genotypic similarity ; usually specified by a template</li>
<li><p><a href="http://en.wikipedia.org/wiki/Axiom_schema" title="Axiom schema" target="_blank" rel="noopener">Axiom schema</a>, a rule describing a set of statements in formal logic<br>In <strong>science</strong>:</p>
</li>
<li><p><a href="http://en.wikipedia.org/wiki/Schema_%28Kant%29" title="Schema (Kant)" target="_blank" rel="noopener">Schema (Kant)</a>, in philosophy the referencing of a category to a sense impression through time</p>
</li>
<li><a href="http://en.wikipedia.org/wiki/Schema_%28psychology%29" title="Schema (psychology)" target="_blank" rel="noopener">Schema (psychology)</a>, a mental set or representation</li>
<li><a href="http://en.wikipedia.org/wiki/Image_schema" title="Image schema" target="_blank" rel="noopener">Image schema</a>, a recurring pattern of spatial sensory experience</li>
<li><p><a href="http://en.wikipedia.org/wiki/SCHEMA_%28bioinformatics%29" title="SCHEMA (bioinformatics)" target="_blank" rel="noopener">SCHEMA (bioinformatics)</a>,   an algorithm used in protein engineering to identify fragments of   proteins that can be recombined without disturbing the integrity of the   proteins’ three-dimensional structure<br>In <strong>Electrical Engineering</strong>:</p>
</li>
<li><p><a href="http://en.wikipedia.org/wiki/Electrical_schematic" title="Electrical schematic" target="_blank" rel="noopener">Electrical schematic</a>, a wiring diagram of an electrical circuit<br><strong>Schema</strong> may also refer to:</p>
</li>
<li><p><a href="http://en.wikipedia.org/wiki/Great_Schema" title="Great Schema" target="_blank" rel="noopener">Great Schema</a>, a degree of Orthodox monasticism</p>
</li>
<li><a href="http://en.wikipedia.org/wiki/Stereotype" title="Stereotype" target="_blank" rel="noopener">Stereotype</a>, a set of associated behaviors<br>schema来自希腊语”σχήμα” (skhēma),意思是模型,形式,或更普遍来说,计划.复数形式是”σχήματα” (skhēmata).在英语中,schemas和schemata用作复数形式.</li>
</ul>
<p>schema适用于:<br>模型(抽象)<br>图表(原理图,一个图表使用抽象图形符号代表一个系统的元素)</p>
<p>在计算机科学中:<br>XML schema:一种定义结构,内容,在一定程度上,xml文档的语义.<br>Database schema<br>Schema(基因演算):一组程序或位元字串,且其具有一些基因相似点;通常由一个模板指定.<br>image schema:一种空间感觉体验的循环模式<br>SCHEMA(生物信息学):一种用于蛋白质工程的算法用于鉴定蛋白质片段,并在不干扰蛋白质三维结构完整性的情况下重新组合.</p>
<p>在电子工程中:<br>电子原理图:电路的接线图.</p>
<p>schema也适用于:<br>Great Schema:正统修道院制度的一个等级.<br>Stereotype:一系列相关的行为</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html/">html</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/语言/">语言</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-css-after-e9-80-9a-e7-94-a8clear-e6-96-b9-e6-a1-88-e7-9a-84-e5-88-86-e6-9e-90" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/07/13/css-after-e9-80-9a-e7-94-a8clear-e6-96-b9-e6-a1-88-e7-9a-84-e5-88-86-e6-9e-90/" class="article-date">
  <time datetime="2011-07-13T10:40:50.000Z" itemprop="datePublished">2011-07-13</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/07/13/css-after-e9-80-9a-e7-94-a8clear-e6-96-b9-e6-a1-88-e7-9a-84-e5-88-86-e6-9e-90/">CSS :after通用clear方案的分析</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>.clearfix:after{content:”\0020”;display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}</p>
<p>/*</p>
<p>content:”\0020”用来加入一个空格</p>
<p>display:block;用来使其clear属性生效</p>
<p>height:0;visibility:hidden;来去掉其占用的一点空白</p>
<p>overflow:hidden;同样用来去掉其对布局的影响</p>
<p>*/</p>
<p>ie:</p>
<p>.clearfix{display:inline-block;}</p>
<p>/<em> display:inline-block;用来出发ie下的haslayout属性 </em>/</p>
<ul>
<li>html .clearfix{height:1%;}</li>
</ul>
<p>/<em> height:1%;用来触发ie6的haslayout </em>/</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-css-e9-9d-a2-e5-90-91-e5-af-b9-e8-b1-a1-e5-ae-9e-e7-8e-b0-e4-bd-bf-e7-94-a8el-e8-a1-a8-e8-be-be-e5-bc-8f-e6-9d-a5-e7-ae-a1-e7-90-86css-e5-af-b9-e8-b1-a1-cssoo-use-java-el-manage-css-objects" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/07/10/css-e9-9d-a2-e5-90-91-e5-af-b9-e8-b1-a1-e5-ae-9e-e7-8e-b0-e4-bd-bf-e7-94-a8el-e8-a1-a8-e8-be-be-e5-bc-8f-e6-9d-a5-e7-ae-a1-e7-90-86css-e5-af-b9-e8-b1-a1-cssoo-use-java-el-manage-css-objects/" class="article-date">
  <time datetime="2011-07-10T14:46:31.000Z" itemprop="datePublished">2011-07-10</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/07/10/css-e9-9d-a2-e5-90-91-e5-af-b9-e8-b1-a1-e5-ae-9e-e7-8e-b0-e4-bd-bf-e7-94-a8el-e8-a1-a8-e8-be-be-e5-bc-8f-e6-9d-a5-e7-ae-a1-e7-90-86css-e5-af-b9-e8-b1-a1-cssoo-use-java-el-manage-css-objects/">CSS面向对象实现使用EL表达式来管理css对象_CSSOO use java EL manage css objects</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>之前为了让css高度重用,所以我使用自定义标签来管理css对象,现在为了更方便，所以直接使用java EL表达式(Expression Language)来管理越来越多的css对象,页面标签的class属性值被写在了properties配置文件里面,EL表达式负责读取与其对应的 class属性值.</p>
<p>所以在java web的页面中,class属性可以这样写:</p>
<p>&lt;div&gt;<br>&lt;h1&gt;<br>&lt;a href=”#”&gt;<br>&lt;img src=”images/logo.png” width=”200” height=”70” alt=”logo image”/&gt;<br>&lt;span&gt;websit logo&lt;/span&gt;<br>&lt;/a&gt;<br>&lt;/h1&gt;<br>&lt;p&gt;web site introduction&lt;/p&gt;<br>&lt;ul&gt;<br>&lt;li&gt;&lt;a href=”#”&gt;link&lt;/a&gt;&lt;/li&gt;<br>&lt;li&gt;&lt;a href=”#”&gt;link&lt;/a&gt;&lt;/li&gt;<br>&lt;li&gt;&lt;a href=”#”&gt;link&lt;/a&gt;&lt;/li&gt;<br>&lt;/ul&gt;<br>&lt;/div&gt;</p>
<p>el表达式中的值则可以在css.properties中进行添加和修改:</p>
<p>logo = logo displayBlock overflowHide<br>logolink = displayBlock textDecNone positionR<br>logoText = logoText positionA overflowHide<br>menuNav = menuNav positionR listStyleNo displayBlock last<br>menuItem = menuItem left positionR</p>
<p>这样做了之后,在web页面中使用的样式会更加自由,代码重用几乎可以达到100%.下面是更新后的CSS面向对象结构图:</p>
<p><img src="http://www.webdevelopmentmachine.com/images/cssoo2.jpg" alt="CSS 面向对象结构图" title="css oo2"></p>
<p>[caption id=”” align=”alignnone” width=”600”]<img src="http://www.webdevelopmentmachine.com/images/cssoo2.jpg" alt="CSS面向对象结构图"> CSS面向对象结构图[/caption]</p>
<p>EL表达式管理CSS对象的项目github:</p>
<p><a href="https://github.com/RainZhai/cssel" title="https://github.com/RainZhai/cssel" target="_blank" rel="noopener">https://github.com/RainZhai/cssel</a></p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Structure/">Structure</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/面向对象/">面向对象</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e5-93-88-e4-bd-9b-e7-a7-af-e6-9e-81-e5-bf-83-e7-90-86-e5-ad-a6-e7-9a-84-e7-ac-94-e8-ae-b0-harvard-positive-psychology-note" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/07/01/e5-93-88-e4-bd-9b-e7-a7-af-e6-9e-81-e5-bf-83-e7-90-86-e5-ad-a6-e7-9a-84-e7-ac-94-e8-ae-b0-harvard-positive-psychology-note/" class="article-date">
  <time datetime="2011-07-01T14:37:02.000Z" itemprop="datePublished">2011-07-01</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/生活/">生活</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/07/01/e5-93-88-e4-bd-9b-e7-a7-af-e6-9e-81-e5-bf-83-e7-90-86-e5-ad-a6-e7-9a-84-e7-ac-94-e8-ae-b0-harvard-positive-psychology-note/">哈佛积极心理学的笔记_Harvard positive psychology note</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><strong>第一课:什么是积极心理学</strong></p>
<p>要在象牙塔和大众之间构建桥梁</p>
<p>To create a bridge between Ivory tower and mainstreet.</p>
<p>我们要重视人的本质,给予人更多的自尊和自由</p>
<p>We need to value much more the human being.We need to give much more dignity and freedom to the person.</p>
<p>因为信息无法决定我们的幸福感,成功,自尊,动机水平,两性关系及其质量.</p>
<p>Because it’s not just information that determines our wellbeing,our  success,our self-esteem,our motivational level,the relationship and the  quality of our relationships.</p>
<p>世界各地很多人似乎拥有了一切,但仍旧不快乐.而另一些人拥有的不多,但从未中断,从未停止享受人生. 但也有相反的情况. 拥有一切的人充满感恩享受生活,生活窘迫的人觉得自己是受害者.</p>
<p>We know of many people around the world who seemingly have  everything,And yet they are unhappy.And then there are people around the  world who have very little.And yet they never cease,never stop to  celebrate life.And we have another way around as well.People who have  everything and appreciate it and enjoy life.People who have very little  and who see themselves as victim.</p>
<p>换句话说,不只是信息进来,它的形状,如何解读,如何理解,关注的重点.</p>
<p>In other words, it’s not just the information that goes in. It’s also the shape, the interpretation, the perception, the focus.</p>
<p>快乐由我们的精神状态而定而不是社会地位或银行存款</p>
<p>Happiness is much more contingent on our state of mind than our status or the state of our bank account.</p>
<p>我们要挖掘自身潜能,这种潜能一直存在</p>
<p>what we’ll do is uncover potential that we have inside, that we have inside of us all along.</p>
<p>凿除多余石块,也就是摆脱限制,阻碍,或者对失败的恐惧,这些并不是与生俱来的,但如今却出现在大多数人身上.要凿除伤害我们的完美主义.凿除胜利   的能力,因为我们可能害怕胜利.可能对生命中一些东西感到内疚.这些反过来会限制我们,也许甚至还要凿除两性关系中的限制,尤其是带来消极面的时候.这些  就是本课程的主要内容.</p>
<p>It’s about chipping away the excess stone. It’s about getting rid of  limitations, of barriers, whether it’s the fear of failure, something  that we didn’t have as kids. But today most people in our culture have  it. It’s about chipping away perfectionism that is debilitating  and   often  hurts  us.  It’s  about  chipping  away our  ability for   success, because maybe we are afraid of success. Maybe we feel guilty  about some of the things that we have in our life, and that in turn  limits us. Maybe it’s about chipping away the limitations on our  relationships in while we don’t thrive within them.</p>
<p>信息本身还不够,我们除了信息高速公路外还需要转变高速公路.转变高速公路,或转变回道,来经历快速增长的步伐.就像我们下次要讲的,抑郁率上升,焦虑率上升,不只是在这个国家,是全球的.简直是全球传染病.为了应对它,更多的信息也并没有作用.</p>
<p>Information in and of itself is simply not enough. It’s not enough  and what we need in addition to our information highway is a  transformation highway. Transformation high way, or transformation back  roads, to come through the fast increasing pace. Because as we’ll talk  about next time, rates of depression are on the rise, rates of anxiety  are on the rise, not just in this country, globally. It’s literally  global epidemic. And to deal with it, more information will just not do.  Just not enough.</p>
<p>错的并不是科学的重大发现–信息总比无知强,不管是怎样的信息或无知.错在信息背后的信念.认为信息会改变世界的信念.它不会.</p>
<p>Here is Archibald MacLeish. He was a poet, was a Harvard professor,  “What is wrong is not the great discoveries of science– information is  always better than ignorance, no matter what information or what  ignorance. What is wrong is the belief behind the information, the  belief that information will change the world. It won’t.”</p>
<p>教育的目标,人的目标,人性的目标,人被关注的目标从根本上是一个人的自我实现,完全成为一个人.到达人类或是某个特定的个人能达到的最高高度.通俗点讲,就是帮助一个人成为最好的自己.</p>
<p>Abraham Maslow continues, “Humanistic philosophy offers a new  conception of learning, of teaching, and of education. Stated simply,  such a concept holds that the function of education,the goal of  education— the human goal, the humanistic goal, the goal so far as human  beings  are  concerned—  is  ultimately  the  “self-actualization”  of   a  person,  the becoming fully human, the development of the fullest  height that the human species can stand up to or that the particular  individual can come to.</p>
<p>That “Be all you can be.” This is what the class is about.</p>
<p>Two and two things along mattered in terms of determining who will be  the extraordinarily  successful  and  the  rest:  the  first  thing   was  the  extraordinarily successful groups really believe in  themselves. They thought they could do well. They were driven. They were  motivated. And we’ll talk about it in future lecture as belief in  self-fulfilling prophecies. They thought “I’m going to make it. I’m  going to succeed.” That’s the first thing. The sense of the confidence.  The second thing that he found was this group, they were always asking  questions, –always asking questions, initially of their boss, later of  their employees, of their partners, children, parents, friends. They  were always asking question. They were always at the state of curiosity.</p>
<p>幸福存在于一个连续统一体,幸福是一生的追求 Happiness resides on a continuum.Happiness is lifelong pursuit.</p>
<p><strong>第二课:为什么要学习积极心理学</strong></p>
<p>现在抑郁症人群平均年龄小于15.孩子在很小的时候就接触到”信息高速公路”,通常来说,他们还没有准备好,不能有效的去应对它.因此当我们看到这些数据,我们应该做更多的研究去帮助人民客服抑郁和焦虑.</p>
<p>The mean age for depression today is less than 15. Kids at very young  age are introduced to the “information highway”. And very often, they  are not prepared, not able to deal with it in an effective way. So when  we look at this data, we say we do need more research to help people  overcome depression, to help people overcome anxiety.</p>
<p>除了信心和意义感,社会行为 帮助他人,从无助到有益,它们都非常重要，我们要讨论的是帮助他人是意义,并且它不仅仅是在帮助别人,其也在帮助自己.我们便进入了自助和帮助他人的上升式螺旋里.因为我们帮助他人时也在帮助自己.</p>
<p>In addition to the faith and sense of meaning,  pro-social   behavior,  helping other  people, shifting from  helplessness  to  helpfulness, they were significant. One of the things that we’ll talk  about is how meaningful it is to help other people. And how much it  doesn’t just only help others, it also  helps  us.  And  we  enter  an   upward  spiral  between  self-help  and  other-help. Because when we  help others, we are helping ourselves.</p>
<p>他们聚焦在他们的长处上,而不是缺点.</p>
<p>They focused on their strength rather than primarily deficiencies.</p>
<p>问题制造现实,它们创造可能性,一个问题引起一场探索.</p>
<p>Questions create reality. They create possibilities.A question begins a quest.</p>
<p>人们大多问自己”我的缺点是 什么?我需要提高什么?”经常忽视”我的长处是什么? 我的优点?  我擅长什么?”但如果仅仅是问我们自己”我的弱点是什么?不足?”那么我们只会看到自己的不足和缺点.在我们看来,那些好的事物-我们的强项,我们的热  情,优点–这些我们身上美好的事物并不存在.就像你们关注的,公交上没有小孩.</p>
<p>People mostly ask themselves, “what are my weaknesses? What do I need  to improve?” Very often to the exclusion of “what are my strengths?  What are my virtues? What am I good at?” And if the only question that  we ask ourselves are the only questions that are “what are my  weaknesses? Deficiencies?”, then the only thing we’ll see in ourselves  are weaknesses and deficiencies. And as far as we are concerned, the  good things– our strengths, our passions, our virtues– the wonderful  things within us do not exist. Just like as far as you are concerned,  the children on the bus did not exist.</p>
<p>问题造就现实,我们问的问题决定我们要追寻的目标,我们要走的路,我们要过的人生.</p>
<p>Questions create reality. The questions we ask very often determine  the quest that we will pursue, the path that we will take, the life that  we will lead, whether it’s individually, whether it’s interpersonally,  whether it’s organizationally.</p>
<p>例如有一粒种子,种子是有潜力的–它会长成花或者树–如果它没有浇水,没有阳光照耀会怎么样?它会枯萎死去.</p>
<p>What would happen to a seed– seed is potential– flower, tree– what  would happen to a seed, if it is not watered, if no light is shed on  it? It will wither and die.</p>
<p>同样的人的潜力,如果不浇灌它,不给它照耀,它将会枯萎死去.人际关系也是这样,如果我们不-我们谈到最多的两性关系:如何建立健康长久的两性关系–如果不浇灌它,不给它照耀,如果你不欣赏它的好处,好处就会贬值.</p>
<p>The exact same thing with human potential. If we don’t water it, if  we don’t shed a light on it, it will wither and die. The same with  interpersonal relationship potential. If we don’t– we’ll talk a lot  about relationships: how to cultivate healthy long-term relationships–  if you don’t water it, if you don’t shed light, if you don’t appreciate  the good, the good will depreciate.</p>
<p><strong>第三课:幸福是一种随机现象吗?</strong></p>
<p>人们舒适地麻木,舒适地麻木.是不够的,我们怎样超越舒适的麻木?我们怎样超越沉默的压抑? 得到振奋,快乐,幸福?为了达到这些,我们需要去经营这些情感因素.再说一次,幸福不会自动的出现,也不是没有痛苦就会幸福.</p>
<p>“people are comfortably numb”. Comfortably numb. Not enough. How can  we get beyond that “comfortably numb”? How can we get beyond that “quiet  desperation”? To excitement, to joy, to happiness? In order to do that,  we need to cultivate these traits. Once again, they don’t spontaneously  emerge once the painful experiences go away. And that is why we need  positive psychology.</p>
<p>积极心里学专注在健康模型,什么是健康,生理,心理,情感之源.我们怎样让人们从智力,情感,心理上,人际关系,人格上全面发展?我们怎么让它们发展而不是仅仅摆脱生活中不如意的事.</p>
<p>Positive psychology essentially focuses on the health model,  Salutogenesis. What is the source of health, physical, psychological,  emotional? How do    we    get    people    to    flourish,     intellectually,    emotionally,    psychologically, interpersonally,  intra-personally? How do we get them to thrive beyond just getting rid  of what is not working in their lives?</p>
<p>帮助人们找到对人生有意义的事，和他们的热情所在.那就是我们致力于要做到的.</p>
<p>Let’s help them identify something meaningful in their life, their  passion. And that’s how we will, over time, also help what comes off on  the negative side.</p>
<p>你的使命感,对成功的渴望,让世界变得更美好的愿望.</p>
<p>And what struck me most about conversations that I had, either in  Leverett or other houses, were students is their sense of mission, your  sense of mission, your desire to do good, to make the world a better  place.</p>
<p>“How can I make this world a better place?” Passionate. Idealistic.  Good– in the deep sense, good. This desire to make a difference come  into just about all students.</p>
<p><strong>第四课:积极的环境能改变人</strong></p>
<p>改变从一个人或是一部分人开始,然后它不断扩大.问题是”它如何扩大”,以及为什么我们难以理解我们能够做出改变这个事实,并接受被同化。如果我们能了解我们需要理解的是改变如何发生,改变以指数级发生我们与其它人的联系及与更多人的联系形成了一个指数函数.</p>
<p>All change begins in the mind of single person or a small group.” And  then it expands. Now the question is “how does it expand” and “why is  it so difficult for us to understand, accept, assimilate and live  according to the fact that we can make a difference, if we understand  that what we need to understand is how change happens. Change happens  exponentially. Our connection to other people and their connection to  others and so and so create an exponential function which explains for  an example– that those of you are familiar with– “butterfly effect”  how a butterfly flapping its wings in Singapore can theoretically cause a  tornado in Florida. Because on particle hits another and another and  another.</p>
<p>将爱传递,一个想法可以改变世界.</p>
<p>Pay it forward,is it possible let one idea to change the world.</p>
<p>准许为人</p>
<p>The permission to be human</p>
<p>God, grant me the serenity to accept the things I cannot change; the  courage to change the things I can change; and wisdom to know the  difference.</p>
<p>我所要说的是我们需要一个空间,一个空间在我们的生活中在哪里我们准许自己为人,无论是和最亲的好友,我们关心的人,无论首先是面对我们自己,当我们写日记,这里我们准许成为自己,去哭,去快乐,因为如果我们不这样,我们将付出代价.</p>
<p>But what I am saying is that we all need a space, a place in our own  lives where we give ourselves the permission to be human, whether it’s  with close friends, people we care about, whether it’s first and  foremost with ourselves when we write a journal, where we do give  ourselves the permission to be, to cry, to be joyous– because if we  don’t, we pay a price.</p>
<p>Psychological immune system will become stronger. And that means not  that we don’t get ill. It means we get ill less often and when we do get  sick, we’ll recover more promptly. The difference between the extremely  happy people and extremely unhappy people is not that one gets sad, of  upset, or anxious, or depressed; and the other does not. Both groups do.  It’s how quickly, how promptly we can recover from these painful  emotions.</p>
<p><strong>第五课:环境的力量</strong></p>
<p>Because happiness is contagious. If I’m happier, I’m more likely to  contribute to other people’s happiness and wellbeing. Being happy, in  other words, is also a moral state in the sense of actually contributing  to other people’s wellbeing.</p>
<p>people, those of us who are alive, who work on happiness, who  experience the vicissitude of life– the ups and downs– but overall  work on happiness and become happier and happier, have better  relationships, more generous, more accepting of other people, more  tolerant of other people as well as themselves.</p>
<p>because helping others also helps ourselves.</p>
<p>“Be the change you want to see in the world.” This is how you bring about change.</p>
<p>But ultimately, the best way, the optimal way spreading happiness is  to work on your own happiness, because then you are leading by example.</p>
<p>信念既自我实现预言</p>
<p>Belief as Self-Fulfilling Prophecies</p>
<p><strong>第六课:乐观主义</strong></p>
<p>So motivation makes a difference. There is another thing though, in  addition to motivation, and that is the notion of consistency or  congruence.</p>
<p>Let’s look at the optimist now. The optimist starts with high levels  of beliefs, high levels of expectations, motivation,incredibly high. The  mind looking for</p>
<p>consistency, performance, not so good, not as good as the  expectations were. In other words, unrealistic. However, the  interpretation, because of high levels of beliefs, the subjective  interpretation is, OK, so, what if I learn from it? This is an  opportunity;</p>
<p>I’ve actually got better this time. What if I learn? And they still have high levels of beliefs and high levels of expectations.</p>
<p>It’ll be very hard for you to find successful men and women through  out history who did not have all three. Optimism, belief, faith that  they can do well, that they can succeed. Passion, love for what they  were doing. And hard work.</p>
<p><strong>第七课:逆境还是机遇?</strong></p>
<p>So how do we become more of an optimism? I want to talk about three  techniques. First is to take action, to just do it, to put ourselves on  the line. visualization, many of you are familiar with that, especially  athletes as, as a technique. And finally, cognitive therapy, which at  least according to research, is the most successful, most effective  therapeutic intervention out there today.</p>
<p>One of the things that I wish for you is that you fail more. And,  coupled with that, I hope that when you fail, you will also learn to  interpret it in a different way than most of us usually interpret  failure. there is no other way for growth.</p>
<p>When  we  see  ourselves  cope,  when  we  see  ourselves  work   hard,  we  derive conclusions about ourselves, our self confidence goes  up, our motivation goes up, our belief goes  up  and  so on  and  so  on  in  an  upward spiral  of growth.  that  comes inevitably when we cope,  when we try, when we have high expectations. Not to dare is to lose  oneself, Because this model also works the other way around. When we  constantly avoid challenges, when we constantly shone difficult  experiences, a downward spiral is created, in terms of our self esteem,  in terms of our success, in terms of our well being.</p>
<p>In other words, if I create success in my imagination and I persist  with it, not just visualize it once or twice, but over and over again,  And therefore, it will bring up the external reality to match this  internal schema.</p>
<p>And what cognitive therapy is about is the following. Its basic  premise is that thoughts drive emotion. there is an external event. I  perceive that event, and what I do then after I perceive that event,  there is evaluation of that event, in other words, a thought about that  event. And then, as a result of that thought, that evokes an emotion.</p>
<p>Looking at the 10 per cent of the happiest people out there, people  that we can learn from. And what they found was very interesting.</p>
<p>First of all, these people did not experience painful emotions any  less times than the rest of the people, say the bottom 10 per cent or  the mid 10 per cent. They experience painful emotions, the difference  between them and the rest was that they recovered more promptly as a  result of different interpretations. So when they felt down, they were  optimistic instead of saying What can I learn from it? What happen? And  then they recovered more promptly than the pessimists, the people who  remained depressed for a much longer time. You see, events happen,  things happen in the world, very often out of our control. And some of  the events are bad, some are negative. What matters more is what we do  with them after, how we evaluate them. And what happens is that our  evaluation becomes a self-fulfilling prophecy, and believes our  self-fulfilling prophecies.</p>
<p>There are no short cuts. There are no easy steps to wellbeing, to success, to high level of beliefs in ourselves.</p>
<p>The questions that we ask determine our reality.</p>
<p>We very often create our own reality. And if we understand this, we  can transform, change the way that we perceive, change our focus, change  our questions, whether it’s  questions disputing irrational  evaluations, and questions create a new reality.</p>
<p>But the relationships that go through crucibles, that have crises,  disagreements and then, you know, Thesis and Antithesis and then there  is a Synthesis, and there is a growth as a result of these hardships.  And he says that there is no other way, again learn to fail or fail to  learn, there is no other way for a long-term success of a relationship.  Relationship does not, cannot look like this. It has to have these ups  and downs.</p>
<p>Never let a good crisis in a relationship go to waste，and there are  some that could end, and should end a relationship. But most crises can  be solved and need to be dealt with.</p>
<p>Same reality, different interpretations.</p>
<p><strong>第八课:感激</strong></p>
<p>The media does focus to the great extent on the negative. And that’s  not just a bad thing. Because one of the roles of media in a civil  society is to highlight wrongs that can be righted, to inspire people,  to act, to change, to make the world a better place. However, we need to  realize that the media doesn’t just report reality as it is.</p>
<p>The media focuses,highlights the negative.It acts as a magnifying glass rather than as a looking glass.</p>
<p>Magnifying the negative. Minimizing the positive. In other words,  what the media does is to distort our perception. It actually makes us  into pessimists, especially because the news is on 24 hours a day. And  we are constantly bombarded by negativity after negativity after  negativity. And where do we get the positive? 30 seconds at the end of  the news. Oh yes, there’s also a little bit good stuff going on. And  it’s just to make you smile so that you come back tomorrow or the next   hour for more bad  news.</p>
<p>Highlighting the negative. Ignoring the positive. Millions and  billions of honest transactions taking place all the time, all around us  constantly. Now what else is happening? What we are doing, what the  media is helping us to do is extrapolate from a few instances where  people want to hurt, while ignoring the millions and billions of people  who are dedicating their lives to helping spread the happiness in the  world.</p>
<p>And the problem is when we just focus on bashing, when we just focus  on the negative, we create a worse reality rather than improving the  reality.</p>
<p>when they appreciate the good, when they find benefit in that situation, the good appreciates. It grows.</p>
<p>Another reason in addition to media why we tend to ignore the good and focus mostly on the bad is that we adapt.</p>
<p>There is another side. When we adapt, we also take things for  granted. And that’s not a good thing. Because we take for granted our  family that we care about so much. And we take for granted our friends.  And we take for granted the food we are about to have in the dinning  hall that is served to us.</p>
<p><strong>第九课:积极情绪</strong></p>
<p>In other words, what she insisted on was staying real. Being real.  Being connected to what was around her. And when it was evil and bad,  she was connected to that and at the same time, she was also connected  to the good.</p>
<p>想想家庭的不同方面,如果你每天写的的家庭.一星期写工作,下一个星期写家庭.保持用心.专注在你之前没有注意的事情上,发现新的特点.<br>to think about different aspects of your family if you write family  every day. To write about work one week. To write about home the next  week. Maintaining mindfulness, focusing on things you didn’t notice  before, creating novel distinctions.</p>
<p>To just do it. There are no short cuts. It’s not because you’ve been  through a lecture on gratitude and you understand, you really understand  what a benefit finder means.</p>
<p>And it’s only through that, that over time, over time, you’ll begin to  see more and more of the positive in the world and counter the current  schema that most of us have literally been imprisoned by, the fault  finder schema.</p>
<p>And it’s by being mindful. By thinking about those wonderful things that  we have, whether it’s in a friend, whether it’s in a movie we want to  watch, whether it’s in the lunch we are going to have served to us in  our house later.</p>
<p>带来满足的是感激之情,心灵对此给与人生的简单回应就是圆满.<br>What brings fulfillment is gratefulness, the simple response of our heart Again.to this given life in all its fullness.</p>
<p>Remember what is the most personal is also most general.</p>
<p>That people hope and believe that they can find quick fix. There is no  quick fix. It takes time. It takes time to change. However, the change  process can be as enjoyable, as fun,as exciting as ultimately achieving  the change. And next week we’ll talk about that wonderful process.</p>
<p><strong>第十课:如何去改变</strong></p>
<p>Happiness. One of the most significant barrier to people’s happiness  is that they associate happiness with slacking off, because the dominant  paradigm. If I’m happy now, I ignore experiencing pain. It means I’m  letting go. It means I’m not gonna be successful. It means I’m gonna  lose my edge.</p>
<p>We’re gonna discuss three distinct, the interconnected pathways to  change—the ABCs of psychology which we have mentioned before. The  ABCs—the A is the affect, the emotion. The B is the behavior, the  action. And C is the cognition, the thought.</p>
<p>Affect, behavior, cognition times gradual and the acute. And we’re going  to talk about six different approaches to change. These six approaches  to change are interconnected. It’s important to connect them.</p>
<p>In order to change a habit, in order to bring about lasting change, we  need to have as much of a solid approach as much…um…force in the  intervention. It’s not just enough to focus on the emotions. It’s not  just enough to focus on action. It’s not enough just to focus on our  thinking. We want to focus on the three—the A, the B, and the C.</p>
<p>And again asking you shall receive; a question begins a quest. And as  soon as I ask this question, it open up channels that I didn’t see  before that were literally right in front of my eyes. And this was the  work that I’ve studied for many years of one of my intellectual heroes.</p>
<p>Having a meaningful goal. When we’re on purpose, when we’re doing things  that we love to do, when what we are, we are doing is meaningful and  significant to us,we’re much  more likely to experience peak  experiences.</p>
<p>There is no other way to change. I can think about it all day long and  say I want to be in touch with my feminine side or I want to be more  courageous, I want to get out. I can think about it all day long.  Nothing will happen. Nothing will happen unless we bring about real  actual behavioral change, real actual behavioral action. And when we do  that, then the sky is the limit.</p>
<p><strong>第十一课:养成良好习惯</strong></p>
<p>maintaining a ritual,requires some self-discipline,but not a lot.<br>Creating a ritual requires a lot of self-discipline.</p>
<p>Rituals - very important and significant.The only way for lasting change.</p>
<p>passionate relationships,the first objective,the primary objective is to  go into relationship to be known.Rather than to be validated.</p>
<p>A lot of preparation before you become an expert in the field and are able to introduce Creativity have that eurake,the insight.</p>
<p>Taking time in- invaluable. Not just for memory,also for creativity.</p>
<p>But if you have such a sacred place and use it,something eventually will happen.</p>
<p>you have to go though preparation,incubation to get to the eureka experience.</p>
<p>you need the foreplay to get to the next level.It’s important.it’s part  of the creative process.It’s very significant for love.after you’ve come  up with the eureka,that is when you evaluate.</p>
<p>the foreplay,have the orgasm,afterward evaluate it.</p>
<p><strong>第十二课:写日记</strong></p>
<p>If we ask the right questions, it opens up opportunities.The other  thing that’s at work here is the power of the word: words create worlds.</p>
<p>Words have power. They have meaning, especially when the words are  meaningful to us when the goals that we declare are meaningful to us,  they are much more likely to come true.</p>
<p>it is not attending of a goal that lead to happiness,but the having of a goal lead to happiness.</p>
<p>we need that goal - this outcome,this future orientation.</p>
<p>And the challege is to identify the treasure of happiness that are  embedded,that are there in the it and that are there all around us.</p>
<p>So carpe diem(seize the day).Do what you want.</p>
<p><strong>第十三课:面对压力</strong></p>
<p>The expectations - the mission: a better world.</p>
<p>However,remember the trickle effect.<br>Overall,it’s a self-concordant goal as well as journey.<br>(call,destiny,task in life,mission)使命,命运,天命,职责</p>
<p>最好的工作是听从你内心的声音.<br>The most noble things is to listen to that inner voice.</p>
<p>因为我们追求自己的热情.当我们追求自我和谐的目标和奋斗过程,我们才真正的活着才能将世界变得更美好.<br>Because when we pursue our passions.when we pursue a self-concordant  goal and a self-concordant journey,that’s when we come alive and that’s  when we also make the world a better place.</p>
<p>Individuals who are both successful,happy,thriving,flourishing are ones  who do experience stress.However,they also pay very close attention to  recovery.</p>
<p>To sprinting,recovery,sprinting,recovery.That understanding changed my life.</p>
<p><strong>第十四课:过犹不及</strong></p>
<p>Quantity affects quality.量影响质,多则劣,少则精.</p>
<p>There is danger of failing.And wherever there is a crisis,there is opportunity,to learn and grow.</p>
<p><strong>第十五课:完美主义</strong></p>
<p>追求卓越的人不仅仅只关注短时间的放松还关注长久的满足.<br>A person committed to excellence is not just about temporary relief,but about lasting satisfaction.</p>
<p><strong>第十六课:享受过程</strong></p>
<p>人所不欲勿施于己,<br>do not do unto yourself what you would not do unto others.<br>或者说”人所欲方施于己”<br>or rather “do unto yourself what you do unto others.”<br>当我们说到同情时,我们是指对别人的同情.<br>when we talk about compassion,we talk about compassion for others.<br>他说,你们对自己没有同情又怎么能对别人有同情呢<br>And he said,”how can you have compassion for others when you don’t have compassion for yourself?”</p>
<p>别为小事伤神,一切皆是小事.<br>Don’t sweat the small stuff…and it’s all small stuff.<br>许可,积极,转换角度.<br>Three Ps Permission. Positive. Perspective.</p>
<p>灵药就是 半小时的锻炼 每周四次<br>The wonder drug: 30 minutes of physical exercise,4 times a week.<br>至少15分钟的意念锻炼 每周6到7次<br>at least 15 minutes of mindful exercise 6 or 7 times a week.<br>每24小时睡8个小时<br>8 hours of sleep more or less per 24 hours.<br>每天12个拥抱<br>12 hugs a day</p>
<p>有时过由不及<br>There can be too much of a good thing</p>
<p><strong>第十七课:运动与冥想</strong></p>
<p>最不能放弃的是运动<br>Sport,It should be the last thing to go.</p>
<p>自尊隐含了一个概念:我们值得拥有幸福<br>part of self-esteem is the notion that we are worthy of happiness.<br>值得拥有幸福.当你问别人”你值得拥有幸福吗?”大部分人会说”值得”,但在潜意识中<br>The notion of being worthy of happiness.And when you ask people,”are you worthy o f happiness?”<br>大部分人会说”值得” 但在潜意识中,通常很多人都会说”不值得”可能因为脑袋里有一把声音说”不值得”<br>Most people would say,”yes.” But if you ask the subconscious,very often, for many people, it’s “no”</p>
<p>可能因为脑袋里有一把声音说”不值得”因为过去老师,教育工作者,父母,重要的大人社会大众都要我们向不现实的榜样看齐<br>whether it’s because of the voice that we heard in the past from  teachers,educators,parents,significant adults,society at large by  comparing us to unrealistic models.</p>
<p>这是一个障碍;使得我们无法更快乐<br>And that is a barrier;that stops us from becoming happier.</p>
<p>And again it’s the five-minute take-off that</p>
<p>不再尝试无视和消除身体不适而是抱着关怀之心与关注它.我们就能真正地改变我们的感受.<br>With the shift trying to ignore or eliminate physical discomfort to  paying attention with friendly curiosity.We can transform- quite  literally transform our experience.</p>
<p><strong>第十八课:睡眠、触摸和爱情的重要性</strong></p>
<p>we need 4 hugs a day for survival. we need 8 hugs a day for maintenance.we need 12 hugs a day for growth.</p>
<p>他们想的,他们希望的是延续他们关系最初时的爱与热情<br>Their thought,their hopes is to continue the exact same love and passion.<br>因为爱情,特别是欲望和热情会随着时间磨灭<br>One of the reasons is because love,and especially lust and passion wears over time.</p>
<p>第一 维持恋情需要努力<br>First - that relationship is about hard work</p>
<p><strong>第十九课: 如何让爱情天长地久</strong></p>
<p>finding mindset</p>
<p>培养心态,是可塑的与个人努力有关<br>cultivating mindset,that is malleable related to the effort part.</p>
<p>找到合适的人当然重要,但培养一段感情更重要.<br>A good partner is of course important.</p>
<p>与寻找心态紧紧相连的是真名天子只有一个这样的观念<br>Now connect it to this, to the mindset is the notion that there is only one right person for us.</p>
<p>我所需要做的就是穷尽一生找到那个真名天子<br>And all i need to do,all i need to dedicate all my effort and time to is find that right person.</p>
<p>这世界上有60亿人,真命天子绝非仅一个<br>There are 6 billion people in the world.There is more than one right person.</p>
<p>而是与你选择的恋人培养感情<br>Once again it is cultivating that one chosen relationship.</p>
<p>这是创造一段恋情的方式,一段独特的恋情<br>That is how we create the one chosen relationship,one special relationship</p>
<p>事实上感情没有完成一说,这是一个过程<br>In fact, it doesn’t happen; it is happening. it is a process.</p>
<p>它无关恋情的成功;而是恋情的延续<br>It is not about successs in a relationship; it is about succeeding in a relationship.</p>
<p>解决冲突的要点之一在于确立一个超然目标.<br>That the important thing in resolving conflicts is having a super ordinate goal.</p>
<p>尽管如此 若我们不主动维持爱情,长此以往 由于自我知觉理论,热情会退去因为我们没在恋情中有所投入.<br>However, if we don’t sustain the active love,over time because of  self-perception theory,over time that we go away.because i don’t invest  anything in relationship.</p>
<p>如果没有主动爱情 则恋情无以为继<br>So if there isn’t the active love,it cannot be sustained.</p>
<p>适用于提高领导能力,是极其诚实正直的人.<br>And it applies in the realm of leadership - the greatest leaders,They are the people who have the highest levels of integrity.<br>只要我们坦诚,就更可能被容纳接受.<br>when we express ourselves, we are much more likely to thrive.</p>
<p>被了解才是基础,而不是被认可<br>The foundation is to be known</p>
<p>第三点是要允许恋情中出现冲突.<br>The third point is about allowing for conflict in a relationship.</p>
<p>上帝就在细节中,爱情也是这样,爱情就在细节中.<br>God is in the details.The same with love. Love is in the details.</p>
<p>最后 关于健康恋情的第四点 积极认知<br>Finally the fourth component of the healthy relationship-positive perception.</p>
<p>伴侣一定要做优点感知者.他们要赞赏对方<br>the partners have to be the benefit finders.They have to appreciate one another.</p>
<p>爱不仅能感知潜力而且还让其转换为现实<br>Not only does love perceive potentialities but it also actualizes them.</p>
<p><strong>第20课:幸福与幽默</strong></p>
<p>女人笑的次数与女人喜欢男人的程度成正比,反过来也是.他们还发现女人笑的次数与男人喜欢她的程度成正比.<br>And so what they found is that the number of laughs by the female  correlated with how much the female like the male and that in exchange.  They also found out that the number of laughs by the female correlated  with how much the male liked her.</p>
<p>六种方式来增加自己的幽默感<br>six ways you can actually increase your humor levels as well.</p>
<p>首先把只属于你的故事写进日记.好笑的故事,当你写进日记时要尽量写积极的经历<br>First of all, we just talked about one of these.But journaling stories  that are unique to you,finding funny stories that just as you have to go  though your day and when you journal,try to write about positive  experiences</p>
<p>第二是观察幽默的人,当你观察幽默的人时因为镜像神经元你能从他们身上学到幽默的一些规律<br>Second is watching funny people,when you observe other people that are  funny.because of these mirrior neurons,you actually pick up the rhythm  of humor from them.</p>
<p><strong>第21课: 爱情与自尊</strong></p>
<p>美丽的敌人 多美的描述<br>A beauttiful enemy what a beautiful phrase.</p>
<p>没有冲突的爱情就没有美丽的敌人<br>A conflict free relationship is where there are no beautiful enemies.</p>
<p>美丽的敌人是指因为爱我们关心我们 所以要跟我们针锋相对的人<br>A beautiful enemy is a person who loves us,who cares about us enough to challenge us,enough to disagree.</p>
<p>You make me what to be a better man.</p>
<p>横行是有建设性的沟通与破坏性的沟通<br>So we have on one dimesion constructive versus destructive communication;<br>纵列是主动沟通与被动沟通<br>on the other dimension,active versus passive communication.</p>
<p>当你的努力是充满乐趣意义非凡时渐渐地就会使爱情更幸福<br>And when that hard work is pleasurable and meaningful,over time that leads to a happier relationship.</p>
<p>使你们更快乐 建立双赢的伴侣关系<br>happier individuals to a win-win togetherness.</p>
<p>有所保留的原因是追求幸福的本质是自私的<br>Some discomfort because pursuing happniess is by its nature selfish.</p>
<p>我们越独立,就越相互依赖<br>the more independent we are,the more inter-dependent we can become.</p>
<p>那些认为自己没有价值的人会被视为自尊较低那些表现出自傲的人会被视为自尊极高.<br>Those who express the sense of unworthiness are said to have low  self-esteem,or the person who is to express self-pride are said to hold  themselves in highest esteem.</p>
<p>所以说自尊说的是我对自己的态度,是对自我概念的评估.<br>It is about the attitude that i have toward myself.It’s the evaluative part of the self concept.</p>
<p>两个组成部分,能力感价值感<br>Two components,the feeling,the experience of competence and the feeling and experience of worthiness.</p>
<p>Branden说 自我概念就是命运<br>In the words of Branden:Self concept is destiny.</p>
<p>信念或自我实现语言<br>Beliefs or self-fulfilling prophecy</p>
<p>如果我相信自己,相信自己值得快乐,相信自己有能力,那么我成功的可能性更大<br>If i think of myself,believe in myself,believe that i am worthy,that i  am capable of a lot,I will,I am much more likely to succeed.</p>
<p>自尊与快乐的相关系数都超过0.6<br>the correlation between self-esteem and happiness is above 0.6.</p>
<p>低自尊常常与焦虑并存<br>low self-esteem is associated with anxiety.</p>
<p>That are important for the cultivation of self-esteem:</p>
<p>first,integrity 正直</p>
<p>The practice of self-awareness know yourself</p>
<p>Purposefulness,having goals,having self-concordant goals,pursuing  them,living a life of purpose,of calling,taking responsibility remember  once again no one is coming.</p>
<p>It’s up to you to make something of your lives.The practice of  self-acceptance. Permission to be human on a daily basis.And finally,  the practice of self-assertiveness;</p>
<p>The first level of self-esteem was a dependent self-esteem.<br>The second level of self-esteem that is not contingent on others;<br>and finally the third component essentially does not even need to be called self-esteem simply a sense of self.</p>
<p>A person who has dependent self-esteem looks for constant approval,very often is associated with perfectionism;</p>
<p>whereas the person has independent sense of self looks for criticism.<br>their motivation,their primary motivation is “What am i passionate  about?””What do i care about?””What do i really,really want to do with  mhy life?”</p>
<p>becoming known rather than validated</p>
<p><strong>第二十二课:自尊与自我实现</strong></p>
<p>why is it important to be independent?</p>
<p>why is it that we should strive for this evolution?</p>
<p>Shouldn’t we stay of the conformity dependence level?</p>
<p>it is important to cultivate independence as a way to cultivate interdependence</p>
<p>obedience to authority a person with high dependence self-esteem</p>
<p>When we cultivate self-love,when we cultivate self-esteem that is when we are most likely to be empathic and to love others.</p>
<p>Put myself in a world that no one would know what i was doing.I’m much  more likely to identify that thing which is my passion.my core,my  calling.</p>
<p>Let me express myself And yes it may hurt me.</p>
<p>It will hurt me,if they don’t like me.I’m resilient I’m strong,I can deal.</p>
<p>And what i found was that dependent self-esteem was associated with  instability independent self-esteem was associated with stablility.</p>
<p>Those with high self-esteem that was mostly dependent were more  likely,not always,not every person but on average,were more likely to  display hostility those people with high self-esteem that is mostly  independent were much more open,cooperative and generous.</p>
<p>how people with high independent self-esteem were less likely to be perfectionistic</p>
<p><strong>第二十三课:收获交流</strong></p>
<p>share it by being practical idealists</p>
<p>Be the change you want to see in the world</p>
<p>If you want a happier world,be that change.</p>
<p>So each time you go to one of those wonderful places exotic or  otherwise,remember to simplify, remember to take care of  yourself,remember to exercise remember to assert yourself and say no  when appropriate,remember to cultivate your relationships.Remember what  it is that is really really important for you in your life.</p>
<p>Each and every one of you is an entire world,a world in the making in  the making of this world your world our world a better place</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/学习/">学习</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/生活/">生活</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e5-8f-82-e6-95-b0-e4-bc-a0-e9-80-92-e6-96-b9-e5-bc-8f-e7-9a-84-e4-b8-80-e4-ba-9b-e6-80-bb-e7-bb-93-parameter-passing-method" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/06/28/e5-8f-82-e6-95-b0-e4-bc-a0-e9-80-92-e6-96-b9-e5-bc-8f-e7-9a-84-e4-b8-80-e4-ba-9b-e6-80-bb-e7-bb-93-parameter-passing-method/" class="article-date">
  <time datetime="2011-06-28T07:20:07.000Z" itemprop="datePublished">2011-06-28</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/web-development/">web development</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/06/28/e5-8f-82-e6-95-b0-e4-bc-a0-e9-80-92-e6-96-b9-e5-bc-8f-e7-9a-84-e4-b8-80-e4-ba-9b-e6-80-bb-e7-bb-93-parameter-passing-method/">参数传递方式的一些总结_Parameter passing method</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>程序中的参数传递分为:值传递,引用传递,值结果传递,名字传递 四种.在java和javascript中则似乎只有两种.</p>
<p><strong>值传递(pass by value)</strong><br>在这个机制中，自变量是在调用时计算的表达式，而且在执行过程时，它们的值就成为了参数的值.</p>
<p><strong>引用传递(pass by reference)</strong><br>在引用传递中,自变量必须与分配的地址一起变化(至少是原则上).并非传递变量的值,引用传递的是变量的地址,因此参数就变成了自变量的别名,而且在参数上发生的任何<br>变化都会出现在自变量上.</p>
<p><strong>值结果传递(pass by value-result)</strong><br>除了未建立真正的别名之外，这个机制得到的结果与引用传递类似:在过程中复制和使用自变量的值，然后当过程退出时，再将参数的最终值复制回自变量的地址.</p>
<p><strong>名字传递(pass by name)</strong><br>这是传递机制中最复杂的参数了。由于名字传递的思想是直到在被调用的程序真正使用了自变量(作为一个参数)之后才对这个自变量赋值，所以它还称作延迟赋值(delayed evaluation).</p>
<p><strong>注:</strong>自变量(independent  variable)一词来自数学。在数学中，y=f（x）。在这一方程中自变量是x，因变量(dependent  variable)是y.如果x取任意一个量，y都有唯一的一个量与x对应，那么相应地x就叫做这个函数的自变量.  x的取值范围叫做函数的定义域(domain),对应y的值叫做函数值(function value),函数值的集合叫做值域(range).</p>
<p>Java 应用程序中的变量可以为以下两种类型之一：引用类型或基本类型。当作为参数传递给一个方法时，处理这两种类型的方式是相同的。两种类型都是按值传递的；没有一种按引用传递。这是一个重要特性，正如随后的代码示例所示的那样。</p>
<p>在继续讨论之前，定义         按值传递和          按引用传递这两个术语是重要的。          按值传递意味着当将一个参数传递给一个函数时，函数接收的是原始值的一个副本。因此，如果函数修改了该参数，仅改变副本，而原始值保持不变。           按引用传递意味着当将一个参数传递给一个函数时，函数接收的是原始值的内存地址，而不是值的副本。因此，如果函数修改了该参数，调用代码中的原始值也随之 改变。</p>
<p>java中基本类型都为值传递,即使创建基本类型的对象,如:</p>
<p>public class Test {<br>public void changeString(String s) {<br>s = “hi”;<br>}<br>public void changeInt(int s) {<br>s = 100;<br>}<br>public static void main(String[] args) {<br>Test test = new Test();<br>//创建string对象<br>String a = new String(“aa”);<br>String b = “bb”;<br>test.changeString(a);<br>test.changeString(b);<br>System.out.println(a); //结果为 aa<br>System.out.println(b); //结果为 bb</p>
<p>//创建Integer对象<br>Integer c = new Integer(1);<br>int d = 2;<br>test.changeInt(c);<br>test.changeInt(d);<br>System.out.println(c); //结果为 1<br>System.out.println(d); //结果为 2<br>}<br>}</p>
<p>说明只是进行值的传递,原来赋值的变量没有改变.但是如果为数组或者对象,则会进行引用传递:</p>
<p>public class Test {<br>public void changeArray(int[] s) {<br>s[0] = 100;<br>}<br>public void changeArray(String[] s) {<br>s[0] = “aa”;<br>}<br>public static void main(String[] args) {<br>Test test = new Test();<br>// 创建int型数组对象<br>int[] e = { 1, 2 };<br>// 创建字符串型数组对象<br>String[] f = { “aa”, “bb” };<br>test.changeArray(e);<br>test.changeArray(f);<br>System.out.println(e[0]); //结果为100<br>System.out.println(f[0]); //结果为aa<br>}<br>}</p>
<p><strong>注:</strong>其它基本类型如:short,long,byte,float,double都为值传递,可以自己进行测试.</p>
<p>同样,可以看看对象的参数传递机制:</p>
<p>public class Test {<br>private String name;<br>private int age;<br>public Test() { }<br>public Test(String name, int age) {<br>this.name = name;<br>this.age = age;<br>}<br>public String getName() {<br>return name;<br>}<br>public void setName(String name) {<br>this.name = name;<br>}<br>public int getAge() {<br>return age;<br>}<br>public void setAge(int age) {<br>this.age = age;<br>}<br>public void changeTest(Test t) {<br>t.name = “rain”;<br>t.age = 33;<br>}<br>public static void main(String[] args) {<br>Test test2 = new Test(“bob”,22);<br>test2.changeTest(test2);<br>System.out.println(test2.getName()); //结果为rain<br>System.out.println(test2.getAge()); //结果为33<br>}<br>}</p>
<p>javascript也有相同的参数传递机制:</p>
<p>&lt;script type=”text/javascript”&gt;<br>//创建对象<br>var man = {name:””,age:0};<br>//创建数组<br>var array = [1,2];<br>function changeBoolean(temp){<br>temp = false;<br>}<br>function changeNum(temp){<br>temp = 100;<br>}<br>function changeString(temp){<br>temp = “aa”;<br>}<br>function changeObject(o){<br>o.name = “hello”;<br>}<br>function changeArray(a){<br>a[0] = 100;<br>}</p>
<p>function test(){<br>var a = 1;<br>var a2 = new Number(1.2);<br>var b = “bb”;<br>var b2 = new String(“bbb”);<br>var c = true;</p>
<p>changeNum(a);<br>alert(a); //结果为1<br>changeNum(a2);<br>alert(a2); //结果为1.2<br>changeString(b);<br>alert(b); //结果为bb<br>changeString(b2);<br>alert(b2); //结果为bbb<br>changeBoolean(c);<br>alert(c); //结果为true<br>changeObject(man);<br>alert(man.name); //结果为hello<br>changeArray(array);<br>alert(array[0]); //结果为100<br>}<br>test();<br>&lt;/script&gt;</p>
<p>值得一提的是,在Ecmascript 262 3rd规范中有引用类型一说:</p>
<p><strong>The Reference Type</strong><br>The internal Reference type is not a language data type. It is defined by this specification purely for<br>expository purposes. An implementation of ECMAScript must behave as if it produced and operated upon<br>references in the manner described here. However, a value of type Reference is used only as an<br>intermediate result of expression evaluation and cannot be stored as the value of a variable or property.</p>
<p>且在javascript高级程序设计中，也有说明:</p>
<p><strong>Reference Types</strong><br>Reference types are commonly referred to as classes, which is to say that when you have a reference<br>value, you are dealing with an object. The vast number of predefined ECMAScript reference types are<br>discussed throughout the book. For now, the discussion focuses around the reference types that are<br>closely related to the primitive types just discussed.<br>ECMAScript doesn’t actually have classes in the traditional sense. In fact, the word “class” doesn’t<br>appear in ECMA-262 except to explain that there are no classes. ECMAScript defines “object definitions”<br>that are logically equivalent to classes in other programming languages. This book chooses to use<br>the term “class” because it is more familiar to most developers.</p>
<p>当然用引用类型来说明javascript的参数传递的话,javascript确实只有值传递一种,但若把它看作是对象的传递,也可以看作引用传递.因为其符合引用传递的特征.</p>
<p><strong>对值结果传递的补充:</strong></p>
<p>从编译程序的编写者的观点来看，值结果传递要求对运行时栈以及调用序列的基本结构的进行若干个修改。首先，被调用的程序不能释放活动记录，这是因为 复制出的(局部)值还必须对调用程序适用。其次，调用程序必须或是在建立新的活动记录开始之前就将自变量的地址压入到栈中，或是必须从被调用的程序中重新 计算出这些返回的地址。-&lt;程序设计原理&gt;</p>
<p>一个实在参数传递给一个过程时是通过产生一个副本给过程使用,但在过程完成时,过程的副本里的值在调用过程继续执行之前传递给实在参数.<br>这种情况,称参数是值-结果传递.-&lt;计算机科学概论&gt;</p>
<p><strong>对名字传递的补充:</strong></p>
<p>在调用点上的自变量的文本被看作是它自己右边的函数，每当在被调用的过程的代码中到达相应的参数名时，就要计算它。我们总是在调用程序的环境中计算自变量，而总是在过程的定义环境中执行过程。-&lt;程序设计原理&gt;</p>
<p>另一种是延迟赋值,如<br>In[10]: = x: = 6+3<br>系统没有立即给出x的值,只有在下一次调用时,才赋一次值.-&lt;高等数学&gt;</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/java/">java</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/编程/">编程</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/语言/">语言</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-javascript-e5-92-8cjava-e4-b8-ad-e7-9a-84this-e5-85-b3-e9-94-ae-e5-ad-97-this-keyword-in-javascript-and-java" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/04/27/javascript-e5-92-8cjava-e4-b8-ad-e7-9a-84this-e5-85-b3-e9-94-ae-e5-ad-97-this-keyword-in-javascript-and-java/" class="article-date">
  <time datetime="2011-04-27T07:16:02.000Z" itemprop="datePublished">2011-04-27</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/java-web/">java web</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/04/27/javascript-e5-92-8cjava-e4-b8-ad-e7-9a-84this-e5-85-b3-e9-94-ae-e5-ad-97-this-keyword-in-javascript-and-java/">Javascript和Java中的this关键字_This keyword in Javascript and Java</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><strong>关于javascript的this关键字</strong>,首先我看了ECMA-262 第三版的介绍:</p>
<p><strong>Activation Object</strong><br>当进入到一个function code的执行上下文,一个叫作activation object(活动对象)的对象被创建,并关联到该执行上下文.  活动对象中一个名叫arguments特征为{ DontDelete  }的属性一起初始化.this属性的初始值是arguments对象在下面会讲述.</p>
<p><strong>this</strong><br>有一个this值和每一个活动的执行上下文关联.this的值取决于调用者(caller)和执行代码的类型(type),并且在进入执行上下文的时候它就已经定下来了,this和执行上下文关联的值是不可变的.</p>
<p>并且对进入一个执行上下文，它也有很详细的介绍:</p>
<p><strong>Entering An Execution Context</strong><br>每个function和constructor 调用进入到一个新的执行上下文,即使一个function调用它自身进行递归.每一个return存在一个执行上下文.一个抛出异常,如果不捕捉,可能存在一个或更多的执行上下文.<br>当控制进入到一个执行上下文,作用域链(scope chain)被创建且被初始化,变量实例被执行,并且this的值被定了下来.<br>作用域链,变量实例和this值的确定由进入的执行代码类型决定.</p>
<p>在《javascript高级程序设计》中也专门讲到了this关键字:<br>其用在对象方法中.this关键字总是指向一个object，而该object调用一个特定的方法.通过使用this,能够在不同的场合重用同样的function.</p>
<p>个人总结:</p>
<p>在调用this关键字，js会在执行上下文中寻找执行代码的活动对象，然后获取this关键字的指向,this取值由调用者决定,但如果是在html页面标签中的事件,则this值会不同.如:<br>&lt;input type=”text” id=”name” &gt;<br>&lt;script&gt;<br>document.getElementById(“name”).onclick = showValue();<br>function showValue(){<br>alert(this.value);<br>}<br>&lt;/script&gt;<br>点击得到的值为””,而&lt;input type=”text” onclick=”showValue()” &gt;得到的值为”undefined”.<br>html标签中的事件在<a href="http://www.w3.org/TR/html4/interact/scripts.html" target="_blank" rel="noopener">http://www.w3.org/TR/html4/interact/scripts.html</a> 有讲到,其被称为Intrinsic events(固有事件).但是它并没有讲为什么在固有事件中声明this能得到当前html标签的一个属性值，而通过调用一个js文件的function则获取不到标签中的this的属性值。</p>
<p>在<a href="http://www.quirksmode.org" target="_blank" rel="noopener">PPK的blog</a>中则讲到了这个问题,并且他认为前者是copying方式,而后者是referring的方式,前者将方法直接拷贝到click事件,而后者是自己去找showValue()方法,找到后再执行.所以this关键字所有者还是window.原文链接:<a href="http://www.quirksmode.org/js/this.html" target="_blank" rel="noopener">http://www.quirksmode.org/js/this.html</a></p>
<p>还有一个问题是:html事件属性是不是本身带有执行上下文，作用域链和活动对象？所以this关键字可以在固有事件中获取值？</p>
<p>这个问题其实是<strong>内联事件处理函数</strong>的特性问题，与其他函数不同，<strong>内联事件处理函数</strong>的作用域链从头部开始依次是：调用对象、该元素的 DOM 对象、该元素所属 FORM 的 DOM 对象（如果有）、document 对象、window 对象（全局对象）。</p>
<p>关于内联事件处理函数，以及不同浏览器兼容问题,<a href="http://www.w3help.org/zh-cn/causes/SJ9009" target="_blank" rel="noopener">http://www.w3help.org/zh-cn/causes/SJ9009</a> 有详细的介绍.我就不copy了。</p>
<p>html5的规范中对events也有很详细的定义:<a href="http://www.w3.org/TR/html5/webappapis.html#events" target="_blank" rel="noopener">http://www.w3.org/TR/html5/webappapis.html#events</a></p>
<p><strong>java中的this关键字</strong>则简单得多,this只能在单个类的方法中使用,表示对当前对象的引用,this的作用范围是当前对象,它在内存中以栈的形式存在.随对象的调用产生,调用结束就回收.</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/java/">java</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/语言/">语言</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-css2-e4-b8-ad-e7-9a-84-e5-8f-af-e8-a7-86-e5-8c-96-e6-a0-bc-e5-bc-8f-e6-a8-a1-e5-9e-8b-visual-fomatting-model-in-css2" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/02/20/css2-e4-b8-ad-e7-9a-84-e5-8f-af-e8-a7-86-e5-8c-96-e6-a0-bc-e5-bc-8f-e6-a8-a1-e5-9e-8b-visual-fomatting-model-in-css2/" class="article-date">
  <time datetime="2011-02-20T07:12:30.000Z" itemprop="datePublished">2011-02-20</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/02/20/css2-e4-b8-ad-e7-9a-84-e5-8f-af-e8-a7-86-e5-8c-96-e6-a0-bc-e5-bc-8f-e6-a8-a1-e5-9e-8b-visual-fomatting-model-in-css2/">CSS2中的可视化格式模型_Visual fomatting model in CSS2</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>css2的可视化格式模型内容太多，我想简单的总结下，方便理解,以下是关键点:</p>
<ul>
<li>视点 viewport</li>
<li>包含块 Containing blocks</li>
<li>控制包含框的生成 Controlling box generation</li>
<li>定位方案 Positioning schemes</li>
<li>常规流向 Normal flow</li>
<li>浮动 Floats</li>
<li>绝对定位 Absolute positioning<br>w3c 规范原文: <a href="http://www.w3.org/TR/CSS2/visuren.html" target="_blank" rel="noopener">Visual formatting model</a></li>
</ul>
<h3 id="相关词汇"><a href="#相关词汇" class="headerlink" title="相关词汇"></a>相关词汇</h3><p>box model: 盒模型<br>boxes: 盒子,控制框<br>schema: 模式,计划,图解,概要,方案<br>continuous media: 连续媒介<br>paged media: 页面媒介<br>margin properties: 边距属性<br>page model: 页面模型<br>Conforming user agents: 一致性用户端<br>overflow: 溢出<br>block-level boxes: 块级盒,块级框<br>block-level replaced element : 块级可替换元素<br>block formatting context: 块格式化上下文<br>block container box: 块容器盒,块容器框<br>inline formatting context: 行内,内联格式化上下文<br>inline-level boxes: 行内,内联级盒,内联级框<br>block boxs: 块盒,块框<br>inline content: 行内内容,内联内容<br>block content: 块内容<br>anonymous block box: 匿名块控制盒,匿名块控制框<br>in-flow block-level box: 流内块级盒<br>containing inline formatting context: 包含内联格式化上下文<br>atomic inline-level boxes: 原子内联级框<br>out of flow: 外部流<br>in-flow: 内部流<br>line box: 线盒,行盒<br>line break:换行符<br>superscripting: 上标<br>subscripting: 下标<br>border box:边框<br>margin box:边距框<br>stacking context:堆叠上下文<br>clearance: 间隙,清除<br>z-axis: z轴<br>stack level: 堆叠级别</p>
<h3 id="9-1-介绍"><a href="#9-1-介绍" class="headerlink" title="9.1 介绍"></a>9.1 介绍</h3><p>本章和下一章描述了可视化格式模型：用户端在图形<a href="http://www.w3.org/TR/CSS2/media.html" target="_blank" rel="noopener">媒体</a>下如何处理<a href="http://www.w3.org/TR/CSS2/conform.html#doctree" target="_blank" rel="noopener">文档树</a>。</p>
<p>可视化格式模型中，每一个文档树中的元素根据<a href="http://www.w3.org/TR/CSS2/box.html" target="_blank" rel="noopener">盒模型</a>产生零个或多个控制盒。这些盒子的布局由下列内容控制：</p>
<ul>
<li>盒子的<a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions" target="_blank" rel="noopener">尺寸</a>和<a href="http://www.w3.org/TR/CSS2/visuren.html#box-gen" target="_blank" rel="noopener">类型</a>.</li>
<li><a href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme" target="_blank" rel="noopener">定位模式</a>(常规流向，浮动和绝对定位).</li>
<li>文档树中元素间的关系.</li>
<li>外部信息(例如，视点大小，图形的固有尺寸等).</li>
</ul>
<p>本章和下一章中定义的属性适用于<a href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group" target="_blank" rel="noopener">连续媒介</a>和<a href="http://www.w3.org/TR/CSS2/media.html#paged-media-group" target="_blank" rel="noopener">页面媒介</a>。不过<a href="http://www.w3.org/TR/CSS2/box.html#margin-properties" target="_blank" rel="noopener">边距属性</a>的含义在应用到页面媒介时会有些不同(详细内容请参见<a href="http://www.w3.org/TR/CSS2/page.html#page-margins" target="_blank" rel="noopener">页面模型</a>).</p>
<p>可视化格式模型并不指定格式化的所有方面(例如，它并不指定字符间距算法)。与CSS一致的用户端在处理本规范未包含的格式化情形时，表现可能有所不同。 对于这个规范没有覆盖到的格式化问题<a href="http://www.w3.org/TR/CSS2/conform.html#conformance" target="_blank" rel="noopener">一致性用户端</a>表现可能不同.</p>
<h4 id="9-1-1-视点-viewport"><a href="#9-1-1-视点-viewport" class="headerlink" title="9.1.1 视点 viewport:"></a>9.1.1 视点 viewport:</h4><p>屏幕上的一个窗口或浏览区域</p>
<p>9.1.2 包含块 Containing blocks:<br>许多的盒子定位和大小是相对与一个矩形盒边缘来计算的，这矩形盒被称为包含块.<br>每个盒子给出一个相对于它的包含块的定位,但是它不被包含块限制,它可能 <a href="http://www.w3.org/TR/CSS2/visufx.html#overflow" target="_blank" rel="noopener">溢出</a>.</p>
<h3 id="9-2-控制框的生成-Controlling-box-generation"><a href="#9-2-控制框的生成-Controlling-box-generation" class="headerlink" title="9.2 控制框的生成 Controlling box generation:"></a>9.2 控制框的生成 Controlling box generation:</h3><h4 id="9-2-1-块级元素和块框-Block-level-elements-and-block-boxes"><a href="#9-2-1-块级元素和块框-Block-level-elements-and-block-boxes" class="headerlink" title="9.2.1 块级元素和块框 Block-level elements and block boxes"></a>9.2.1 块级元素和块框 Block-level elements and block boxes</h4><p>块级盒是参与一个<a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting" target="_blank" rel="noopener">块格式化上下文</a> 的盒子.每个块级元素生成一个主要的块级盒子,其包含子盒子和生成的内容,同时盒子也涉及到定位的方案.<br>除了table盒，和可替换元素,一个块级盒同时也是一个块容器盒,一个块容器盒只包含块级盒子或是建立一个行内格式化上下文来包含行内级盒.不是所有的 块容器盒都是块级盒,不可替换行内块和不可替换table cells是块容器但不是块级盒.是块级盒子的块容器称作块盒.<br>三个术语 “block-level box,” “block container box,” 和”block box”在意义明确的时候简称为”block”.</p>
<p><img src="http://www.webdevelopmentmachine.com/images/block_box.jpg" alt=""></p>
<p><strong>9.2.1.1 匿名块框 Anonymous block boxes</strong></p>
<p>有这样一个文档：<br>&lt;DIV&gt;<br>Some text<br>&lt;P&gt;More text<br>&lt;/DIV&gt;<br>(并假定DIV和P都设置了’display: block’),DIV包含行内内容和块内容。为了使格式化简单一些，我们假定有一个匿名块控制盒围绕在”Some text”周围。</p>
<p><img src="http://www.w3.org/TR/CSS21/images/anon-block.png" alt="anonymous box"></p>
<p>换句话说:如果一个块容器盒(如上例中为DIV生成的框)有一个块级盒(如上例中的P),那么我们强制它只包含块级盒在其中.</p>
<p>当一个行内盒包含一个流内块级盒,这个行内盒打断周围的块级盒,把行内盒分离成两个盒子,它在块级盒子两边.行盒在打断之前和打断之后都附入匿名块盒,并且该块级盒形成一个同辈匿名盒.当这样的行内盒受到相对定位影响,任何产生的移动同样影响到包含在行内盒内的块级盒.<br>该模型讲应用在下面的例子中,如果规则如下:<br>p    { display: inline }<br>span { display: block }<br>被应用到如下规则:<br>&lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Anonymous text interrupted by a block&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;P&gt;<br>This is anonymous text before the SPAN.<br>&lt;SPAN&gt;This is the content of SPAN.&lt;/SPAN&gt;<br>This is anonymous text after the SPAN.<br>&lt;/P&gt;<br>&lt;/BODY&gt;</p>
<p>p元素包含一块(c1)匿名文本随后是一个块级元素再随后是另一块(c2)匿名文本.产生的盒子为一个块盒代表BODY.包含在c1周围一个匿名块盒,SPAN块盒,和在c2周围的另一个匿名块盒.</p>
<p>匿名盒子的属性继承自围合的非匿名盒子.非继承属性有它们的初始值.例如,匿名盒的font属性继承自div,但是margins是0.<br>设置在导致匿名块盒生成的元素上的属性同样能应用给这些匿名盒子和元素的内容.例如,在上面例子中,如果一个border被设置在P元素上,这个border将围在C1和C2周围.</p>
<p>一些用户代理已经用其它方式实现了borders在行内包含块.例如,把内嵌的块放入”匿名盒中”并在这样的盒子周围绘出行内borders.</p>
<p>当处理百分比值时匿名的块盒子被忽略,它适用于:最近的非匿名祖先盒子被用来替代.例如,如果一个匿名块盒的孩子在DIV里面需要知道包含块的高度来解决一个百分比高度.那么它将使用DIV形成的包含块的高度,而不是匿名块盒的高度.</p>
<p><img src="http://www.webdevelopmentmachine.com/images/anony_box.jpg" alt=""></p>
<p><strong>9.2.2 行内级别元素和行内盒 Inline-level elements and inline boxes</strong></p>
<p>行内级别元素是那些源文档中不形成新的块的内容的元素;内容在行内分布(如,段落内着重的文本，行内图形等等).以下的’display’属性值产 生一个行内级别元素:’inline’, ‘inline-table’, and ‘inline-block’.行内级别元素生成行内级别盒,这些盒子参与行内格式化上下文.</p>
<p>一个行内盒是由行内级别和它的内容一起参与它的包含行内格式化上下文.一个non-replaced元素’display’值是’inline’生 成一个行内盒.那些不是行内盒的行内级别盒(例如replaced inline-level 元素, inline-block 元素, 和 inline-table 元素)被称为原子行内级盒,因为它们作为单一不透明(?)盒参与它们的行内格式化上下文.</p>
<p><img src="http://www.webdevelopmentmachine.com/images/inline_box.jpg" alt=""></p>
<p><strong>9.2.2.1 匿名行内盒 Anonymous inline boxes</strong></p>
<p>任何文本它直接被包含在一个块容器元素必须视为匿名行内元素.</p>
<p>在如下的文档中:</p>
<p>&lt;P&gt;Some &lt;EM&gt;emphasized&lt;/em&gt; text&lt;/P&gt;</p>
<p>P元素生成一个块盒，其内还有几个行内盒.”emphasized”的盒子是一个行内元素(EM)产生的行内盒,而其它的盒子(“Some”和”text”)是块类元素(P)产生的。后者就称为匿名行内盒，因为它们没有与之相关的行内级别元素.</p>
<p>这样的行内盒从其父块盒那里继承可以继承的属性。非继承属性取它们的初始值。例子中，初始匿名盒的颜色继承自P，而背景是透明的。<br>空格内容将根据’white-space’属性而折叠,其不会生成任何匿名行内盒.<br>如果根据上下文可以确定匿名盒是哪种类型，匿名行内控制盒和匿名块控制盒在本规范中都被称为匿名控制盒(匿名盒)。<br>在格式化表格时，还会出现更多类型的匿名盒。</p>
<p>9.2.3 插入盒 Run-in boxes(略)</p>
<p>9.2.4 display属性 The ‘display’ property(略)</p>
<h3 id="9-3-定位方案Positioning-schemes"><a href="#9-3-定位方案Positioning-schemes" class="headerlink" title="9.3 定位方案Positioning schemes"></a>9.3 定位方案Positioning schemes</h3><p>1. 常规流向。CSS2中，常规流向包括块级盒的块格式化，行内级盒的行内格式化，块级盒或行内级盒的相对定位.<br>2. 浮动。在浮动模型中，一个盒子首先根据常规流向布局，再将它从流中取出并尽可能地向左或向右偏移。内容可以排列在一个浮动的边上.<br>3. 绝对定位。在绝对定位模型中，一个盒子整个地从常规流向中脱离（它对后续的同胞没有影响），并根据一个包含块来分配其定位.<br>如果元素是浮动,绝对定位或者是根元素被称作外部流.一个元素不是外部流就是内部流.元素A的流是A的组成元素和所有外部流(out-of-flow)祖先是A的流内(in-flow)元素.</p>
<p><img src="http://www.webdevelopmentmachine.com/images/flow_element.jpg" alt=""></p>
<p>9.3.1 Choosing a positioning scheme: ‘position’ property(略)</p>
<p>9.3.2 Box offsets: ‘top’, ‘right’, ‘bottom’, ‘left’(略)</p>
<h3 id="9-4-常规流Normal-flow"><a href="#9-4-常规流Normal-flow" class="headerlink" title="9.4 常规流Normal flow"></a>9.4 常规流Normal flow</h3><p>盒子在常规流中属于一个格式化上下文,其可能是块或者行内,但不会两者都是.块级盒参与块格式化上下文.行内级盒参与行内格式化上下文.</p>
<h4 id="9-4-1-块格式化上下文-Block-formatting-contexts"><a href="#9-4-1-块格式化上下文-Block-formatting-contexts" class="headerlink" title="9.4.1 块格式化上下文 Block formatting contexts"></a>9.4.1 块格式化上下文 Block formatting contexts</h4><p>浮动,绝对定位元素,一些块容器(比如inline-blocks,table-cells,和table-captions)不是块盒,块盒’overflow’不同于’visible’其为它们的内容建立新的块格式化上下文.<br>在块格式化上下文中,每个盒子左外边界接触包含块的左边界.即使在有浮动的情景下也是如此,除非盒子建立一个新的块格式化上下文(在有些情况下盒子可能由于float而变窄).</p>
<h4 id="9-4-2-行内格式化上下文-Inline-formatting-contexts"><a href="#9-4-2-行内格式化上下文-Inline-formatting-contexts" class="headerlink" title="9.4.2 行内格式化上下文 Inline formatting contexts"></a>9.4.2 行内格式化上下文 Inline formatting contexts</h4><p>在一个行内格式化上下文,盒子水平地排列,一个接着一个,从包含块的顶端开始.水平margins,borders,和padding在这些盒子之 间被考虑.这些盒子可能以不同形式垂直对齐:它们的底部或顶部可能是对齐的,或者文本的基线是对齐的.该矩形区域包含的盒子形成一条线被称作行盒.</p>
<p>行盒的宽度由<a href="http://www.w3.org/TR/CSS21/visuren.html#containing-block" target="_blank" rel="noopener">包含块</a>和存在的浮动决定.<br>通常,行盒的左边接触包含块的左边,右边接触包含块的右边.然而,浮动盒子可能在包含块边缘和行盒边缘中间.因此,尽管行盒在同样的行内上下文有一样的宽度,由于浮动的导致可用水平空间的减少它们的宽度可能会变化.行盒在同样的行内格式化上下文高度是变化的.</p>
<p>当在一行上的行内级盒的总宽度少于包含它们的行盒的宽度,它们在行盒内的水平分布由’text-align’决定.如果这个属性值为’justify’,客户端也可以在行内盒(但不是inline-table和inline-block盒)中伸展空间和文字.</p>
<p>当一个行内盒的宽度超过行盒的宽度,它被分成几个盒,且这些盒子分布在几个行盒.如果一个行内盒不能被分离(如单个字符,或语言规范的文字其打断规则不允许在行内盒打断的,或者该行内盒受白色空格或不能换行值的影响),那么该行内盒溢出该行盒子.</p>
<p>当一个行内盒被分割,margins,borders,和padding在分割出现的地方没有视觉效果.</p>
<p>行内盒可以在同样行盒被分割为几个盒子取决于<a href="http://www.w3.org/TR/CSS21/visuren.html#direction" target="_blank" rel="noopener">双向文本处理</a>.</p>
<p>行盒按需被创建来在行内格式化上下文持有行内级别内容.行盒不包含文本,<a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop" target="_blank" rel="noopener">保留的空格</a>.margins,padding，或者borders非零的行内元素,和其它<a href="http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme" target="_blank" rel="noopener">流内</a>(in-flow)内容(比如images,inline blocks或inline tables),且其不以保留的换行符结尾.为了决定在其中任意元素的定位像这样的行盒必须以0-height 行盒对待,并且为了其它的一些目的必须以不存在对待.</p>
<p><img src="http://www.webdevelopmentmachine.com/images/inline_formatting_context.png" alt=""></p>
<p>这里有个行内盒的实例,下面的段落(由块级元素P创建)包含由元素EM和STRONG间隔的匿名文本:<br>&lt;P&gt;Several &lt;EM&gt;emphasized words&lt;/EM&gt; appear&lt;STRONG&gt;in this&lt;/STRONG&gt; sentence, dear.&lt;/P&gt;<br>P元素生成一个块盒它包含5个行内盒.其中有三个是匿名的:<br>下面是一个行内盒构造的例子。接下来的一段（HTML块类元素P产生）包含由元素EM和STRONG间隔的匿名文本：</p>
<p>&lt;P&gt;Several&lt;EM&gt;emphasized words&lt;/EM&gt;appear&lt;STRONG&gt;in this&lt;/STRONG&gt; sentence, dear.&lt;/P&gt;</p>
<p>P元素产生一个块盒，包含了五个行内盒，其中的三个是匿名的：</p>
<ul>
<li>匿名：”Several”</li>
<li>EM: “emphasized words”</li>
<li>匿名：”appear”</li>
<li>STRONG: “in this”</li>
<li>匿名：”sentence, dear.”<br>为了格式化这一段，用户端将这五个盒排入行。本例中，为P元素生成的盒生成了行内盒的包含块。如果包含块足够宽，所有的行内盒将放在一个行盒内：</li>
</ul>
<p>Several emphasized words appear in this sentence, dear.</p>
<p>如果不是，行内盒将被分割并分布在几个行盒之内。前面这一段可能被分割如下：</p>
<p>Several emphasized words appear<br>in this sentence, dear.</p>
<p>或者这样：<br>Several emphasized<br>words appear in this<br>sentence, dear.</p>
<p>上例中，EM盒被分割为两个EM盒（称为”split1”和”split2”）。边距、边框、边白或文本修饰在split1之后或split2之前没有视觉上的效果.</p>
<p>考虑下面这个例子:</p>
<p>&lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”&gt;<br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Example of inline flow on several lines&lt;/TITLE&gt;<br>&lt;STYLE type=”text/css”&gt;<br>EM {<br>padding: 2px;<br>margin: 1em;<br>border-width: medium;<br>border-style: dashed;<br>line-height: 2.4em;<br>}<br>&lt;/STYLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;P&gt;Several &lt;EM&gt;emphasized words&lt;/EM&gt; appear here.&lt;/P&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;</p>
<p>根据P的宽度，这些盒可能分配如下:</p>
<p><img src="http://www.w3.org/TR/CSS21/images/inline-layout.png" alt="Image illustrating the effect of line breaking on the display of margins, borders, and padding."></p>
<ul>
<li>在”emphasized”之前和”words”之后插入了margin.</li>
<li>在”emphasized”之前、之上和之下，”words”之后、之上和之下插入了padding。在每个单词的三边渲染了虚线边框.</li>
</ul>
<h4 id="9-4-3-相对定位-Relative-positioning"><a href="#9-4-3-相对定位-Relative-positioning" class="headerlink" title="9.4.3 相对定位 Relative positioning"></a>9.4.3 相对定位 Relative positioning</h4><p>一旦一个盒子按照<a href="http://www.w3.org/TR/CSS21/visuren.html#normal-flow" target="_blank" rel="noopener">普通流</a>或 浮动布局,它可能相对原来的位置有偏移,这被称作相对定位.以这种方式偏移一个盒子(B1)对跟随其后的盒子(B2)没有 影响.B2的定位好像B1没有偏移,并且在B1应用了偏移后B2不进行重新定位.这意味着相对定位会导致盒子重叠.然而,如果相对定位导致 ‘overflow:auto’ 或 ‘overflow:scroll’盒子溢出,客户端必须允许用户访问这些内容(在它的偏移位置),穿过创建的scrollbar可能会影响布局.</p>
<p>一个相对定位盒子保持它普通流的尺寸,包含换行符和最初的空白为其而保留.这个章节在<a href="http://www.w3.org/TR/CSS21/visuren.html#containing-block" target="_blank" rel="noopener">包含块</a>介绍什么时候一个相对定位的盒子建立一个新的包含块.</p>
<p>对相对定位元素,在没有改变它们尺寸情况下,’left’和’right’水平地移动盒子.’Left’向右边移动盒子,并且’right’向左边移动盒子.因为盒子不会由于’left’或’right’分离或是伸展,使用的值总是left=-right.</p>
<p>如果’left’和’right’值都是’auto’(它们的初始值),使用的值是’0’(也就是盒子在它们的初始位置).</p>
<p>如果’left’值是’auto’,它使用的值是减去’right’后的值(也就是盒子通过’right’值向左移动).</p>
<p>如果’right’值被指定为’auto’,它使用的值是减去’left’后的值.</p>
<p>如果’left’或’right’值都不是’auto’,定位则over-constrained,且其中的一个值会被忽略.如果包含块的 ‘direction’属性值为’ltr’,’left’值胜出且’right’值变为-‘left’(减去left值).如果包含块的 ‘direction’值是’rtl’,’right’胜出’left’值被忽略.</p>
<p>例子.下面的三个规则等价于:<br>div.a8 { position: relative; direction: ltr; left: -1em; right: auto }<br>div.a8 { position: relative; direction: ltr; left: auto; right: 1em }<br>div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }</p>
<p>在不改变尺寸的情况下’top’和’bottom’属性值上下移动相对定位元素.’Top’把盒子向上移动,’bottom’把它们向下移动.因为盒子不 会由于’top’或’bottom’值分割或是伸展,经常使用的值是:top=-bottom.如果它们都是’auto’,它们使用的值都为’0’.如果 它们中的一个是’auto’,它成为另一个的负值.如果两者都不是’auto’,’bottom’被忽略(也就是,使用的bottom值讲减去’top’ 值).</p>
<p>注意:相对定位盒子在脚本环境动态移动能产生动画效果(见’visibility’属性).尽管相对定位可能被用作上标和下标的形式,行高不会自动地将适应定位考虑进去.见<a href="http://www.w3.org/TR/CSS21/visudet.html#line-height" target="_blank" rel="noopener">行高计算</a>描述的更多信息.</p>
<p>相对定位的例子在<a href="http://www.w3.org/TR/CSS21/visuren.html#comparison" target="_blank" rel="noopener">comparing normal flow, floats, and absolute positioning</a>章节提供.</p>
<h3 id="9-5-浮动-Floats"><a href="#9-5-浮动-Floats" class="headerlink" title="9.5 浮动 Floats"></a>9.5 浮动 Floats</h3><p>浮动是一个盒子在当前行向左或右偏移.一个float(或者”floated”或者”floating”盒子)最有趣的特征是内容可以沿着它的边 (或通过’clear’属性禁止).内容由于左浮动的盒子流向右下边,由于右浮动的盒子流向左下方.接下来是一个对float定位和内容流的介 绍;float行为的准确<a href="http://www.w3.org/TR/CSS21/visuren.html#float-rules" target="_blank" rel="noopener">规则</a>在’float’属性有描述.</p>
<p>一个浮动盒子向左或是右进行偏移直到外边缘接触到包含块边缘或者另一个浮动的外边缘.如果有一个行盒,浮动盒的顶部外面和当前行盒的顶部对齐.</p>
<p>如果浮动没有足够的水平空间,它向下偏移直到它适应或者没有更多浮动出现.(no more floats present.)</p>
<p>因为浮动不在流(flow)中,非定位块盒在浮动盒前面和后面被创建,垂直地.好像浮动不存在一样.但是,当前和后面的行盒紧挨着浮动被创建,它们会按需要缩短来为浮动盒的margin让出空间.</p>
<p>一个行盒会紧接挨一个浮动,条件是存在一个垂直的定位其满足四个条件:(a)在行盒的顶部或顶部下面.(b)在行盒的底部或底部上面.(c)在浮动顶部的margin边缘下面(d)在浮动的底部margin边缘上面.</p>
<p>注意:这意味着外部高度为0或为负数的浮动不会缩短行盒.</p>
<p>如果一个缩短的行盒对内容来说太小,那么 这个行盒向下移动(它的宽度重新计算),直到内容适应,或是没有更多浮动出现.任何内容(在当前行)在一个 浮动的盒子之前流入浮动另一边的同样的行,换句话说,如果行内级别盒被强加到在左浮动前的行刚好碰到其适合在剩下的行盒空间,左浮动被强加到那行,和行盒 的顶部对齐,然后在行上的行内级别盒相应地被移动到浮动的右边(右边成为左浮动的另一边)反过来对rtl和右浮动也一样.</p>
<p><img src="http://www.webdevelopmentmachine.com/images/float_1.png" alt=""></p>
<p>table的border框,块级可替换元素,或者一个普通流内的元素其建立一个新的<a href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting" target="_blank" rel="noopener">块格式化上下文</a>(例 如,一个’overflow’元素不同于 ‘visible’元素)必须不重叠任何浮动的盒子的margin框,在同样的块格式化上下文就像元素本身一样.如果需要,实现应该通过放置它在之前浮动 元素的下面来清除上述的元素,但如果有足够的空间可能放置它到临近的浮动.他们可能甚至使得上述的border框比<a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" target="_blank" rel="noopener">section 10.3.3</a> 定义的更窄.CSS2不定义什么时候客户端可以放置上述的元素紧挨着浮动或者上述的元素可以变窄多少.</p>
<p><strong>例如.</strong>在下面的文档片段,包含块对包含紧接着浮动的内容太窄.于是内容被移动到浮动的下面,其在行盒内的对齐方式由text-align属性决定.<br>p { width: 10em; border: solid aqua; }<br>span { float: left; width: 5em; height: 5em; border: solid blue; }</p>
<p>…</p>
<p>&lt;p&gt;<br>&lt;span&gt; &lt;/span&gt;<br>Supercalifragilisticexpialidocious<br>&lt;/p&gt;</p>
<p>这片段可能看起来像:</p>
<p><img src="http://www.w3.org/TR/CSS21/images/supercal.png" alt="Image illustrating the effect of an unbreakable piece of content being reflowed to just after a float which left insufficient room next to it for the content to fit."></p>
<p>几个浮动可能是相邻的,这个模型同样适用于同行相邻的浮动.</p>
<p>接下来的规则用 浮动所有的IMG盒到左边(设置左边的margin为’0’):</p>
<p>img.icon {<br>float: left;<br>margin-left: 0;<br>}</p>
<p>考虑下面的HTML源码和样式:</p>
<p>&lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”&gt;<br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Float example&lt;/TITLE&gt;<br>&lt;STYLE type=”text/css”&gt;<br>IMG { float: left }<br>BODY, P, IMG { margin: 2em }<br>&lt;/STYLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;P&gt;&lt;IMG src=img.png alt=”This image will illustrate floats”&gt;<br>Some sample text that has no other…<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;</p>
<p>IMG盒被浮动到左边.紧接着的内容被格式化到浮动的右边,开始于同样一行如同浮动一样.在浮动右边的行盒根据存在的浮动被缩短.但在浮动之后恢复它们的”normal”宽度(它的包含块由P元素创建).该文档可能被格式化成:</p>
<p><img src="http://www.w3.org/TR/CSS21/images/floateg.png" alt="Image illustrating how floating boxes interact with margins."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/floateg-desc.html" title="Long description of float and text flow example" target="_blank" rel="noopener">[D]</a></p>
<p>如果文档如下格式将完全相同:<br>&lt;BODY&gt;<br>&lt;P&gt;Some sample text<br>&lt;IMG src=img.png alt=”This image will illustrate floats”&gt;<br>that has no other…<br>&lt;/BODY&gt;<br>因为浮动左边的内容被浮动替换重新流下它的右边.</p>
<p>如<a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" target="_blank" rel="noopener">章节8.3.1</a> 所说,浮动盒的margin绝不会和临近的盒<a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" target="_blank" rel="noopener">重叠</a>.因此,在前面的例子中,在P盒和浮动的IMG盒之间垂直的margin不会重叠.</p>
<p>浮动的内容是堆叠的就好像浮动生成了新的堆叠上下文(stacking contexts),除了一些positioned元素和一些创建了新的堆叠上下文的元素并且其参加浮动的父级堆上下文. 一个浮动能够重叠普通流中的其它盒子(例如,当普通流盒子紧接着浮动有负的margin).当它发生后,浮动在no-positioned流内块的前面重 渲染,但在流内行内(inlines)后面.</p>
<p>这里有另一个演示,演示了在普通流中当一个浮动重叠元素的borders会发生什么.</p>
<p><img src="http://www.w3.org/TR/CSS21/images/float2p.png" alt="Image showing a floating image that overlaps the borders of two paragraphs: the borders are interrupted by the image."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/float2p-desc.html" title="Long description of how floats overlap with boxes in normal flow" target="_blank" rel="noopener">[D]</a></p>
<p><strong>A floating image obscures borders of block boxes it overlaps.</strong></p>
<p>下一个例子演示了使用’clear’属性去阻止内容紧挨着一个浮动.</p>
<p>假设一个规则例如:<br>p { clear: left }<br>格式应该看起来像:</p>
<p><img src="http://www.w3.org/TR/CSS21/images/floatclear.png" alt="Image showing a floating image and the effect of "> <a href="http://www.w3.org/TR/CSS21/images/longdesc/floatclear-desc.html" title="Long description of how floats overlap with boxes in normal flow" target="_blank" rel="noopener">[D]</a></p>
<p><strong>Both paragraphs have set ‘clear: left’, which causes the second paragraph to be “pushed down” to a position below the float — “clearance” is added above its top margin to accomplish this (see the **</strong><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" target="_blank" rel="noopener">‘clear’</a> property). **</p>
<h3 id="9-5-1-浮动的定位：’float’属性-Positioning-the-float-the-‘float’-property"><a href="#9-5-1-浮动的定位：’float’属性-Positioning-the-float-the-‘float’-property" class="headerlink" title="9.5.1 浮动的定位：’float’属性 Positioning the float: the ‘float’ property"></a>9.5.1 浮动的定位：’float’属性 Positioning the float: the ‘float’ property</h3><p><strong>‘float’ </strong><br>值：   left | right | none | inherit<br>初始值：   none<br>适用于：   除了定位的元素和生成的内容之外的所有元素<br>可否继承：   否<br>百分比：   N/A<br>媒介：   图形</p>
<p>该属性指定一个盒是否应该向左，向右浮动或不浮动。它适用于产生盒子但不是<a href="http://www.w3.org/TR/CSS21/visuren.html#absolutely-positioned" target="_blank" rel="noopener">绝对定位</a>的所有元素。该属性取值的含义如下：</p>
<p><strong>left </strong><br>该元素产生一个<a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes" target="_blank" rel="noopener">块</a>盒，并向左浮动。内容在该盒的右边排列，开始于顶部(受限于’clear’属性).<br><strong>right </strong><br>和’left’相同，除了盒子向右浮动,内容排列在盒的左边，开始于顶部.<br><strong>none</strong><br>该盒不浮动.</p>
<p>下面是一些更精确的规则来控制浮动的表现:</p>
<ol>
<li>向左浮动的盒的左<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">外边</a>不可以出现在它的<a href="http://www.w3.org/TR/CSS21/visuren.html#containing-block" target="_blank" rel="noopener">包含块</a>左边界之左。对于向右浮动的元素也有类似的规则.</li>
<li>如果当前的盒向左浮动，并且在源文档中先前有元素产生了任何向左浮动的盒，那么对于每一个这样的先前的盒，要么当前盒的左<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">外边</a>出现先前盒的右<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">外边</a>之右，要么它的顶部必须在先前的盒的底部之下。对于向右浮动的盒也有类似的规则.</li>
<li>向左浮动的盒的右<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">外边</a>不可以出现在它右边的任何向右浮动的盒子的左<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">外边</a>之右.对于向右浮动的元素也有类似的规则.</li>
<li>一个浮动盒的<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">外顶边</a>不可以高于它的<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">包含块</a>的顶.当浮动在两个折叠的margin间发生,浮动定位就好像有另外一个空的<a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" target="_blank" rel="noopener">父级匿名块</a>参与流.这样的父级定位在margin collapsing章节定义了<a href="http://www.w3.org/TR/CSS21/box.html#collapsed-through" target="_blank" rel="noopener">规则</a>.</li>
<li>浮动盒的<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">顶边</a>不可以高于源文档中先前的元素产生的<a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes" target="_blank" rel="noopener">块</a>或<a href="http://www.w3.org/TR/CSS21/visuren.html#floats" target="_blank" rel="noopener">浮动</a>盒的顶.</li>
<li>一个元素的<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">顶边</a>不可以高于源文档中先前的元素产生的包含一个盒的任何<a href="http://www.w3.org/TR/CSS21/visuren.html#line-box" target="_blank" rel="noopener">行盒</a>的顶.</li>
<li>向左浮动的盒如果在它左边有另外一个向左浮动的盒，它的右外边不可以出现在它的包含块的右边之右.(或者比较宽松的要求是:一个左浮动不可以超出右边,除非它已经尽可能地靠左排列.)对于向右浮动的元素也有类似的规则.</li>
<li>一个浮动盒要放置得尽可能的高.</li>
<li>一个左浮动盒必须尽量靠左放置，一个右浮动盒必须尽量靠右放置。在更高的位置和更靠左或靠右的位置间，选择前者.<br>但是在CSS2.1,如果,在块格式化上下文,有一个流内负的垂直margin,这样这个浮动的position在这个原本的位置之上,所有的这些负margin设置为0,浮动的position是undefined.</li>
</ol>
<p>参照这些规则中其它的元素仅指像浮动一样在同样<a href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting" target="_blank" rel="noopener">块格式化上下文</a>的其它元素.</p>
<p>这个HTML片段结果是b浮动到右边.<br>&lt;P&gt;a&lt;SPAN style=”float: right”&gt;b&lt;/SPAN&gt;&lt;/P&gt;<br>如果P元素宽度足够,a和b将会并排,它应该看起来像:</p>
<p><img src="http://www.w3.org/TR/CSS21/images/float-right.png" alt="An a at the left side of a box and a b at the right side"></p>
<h4 id="9-5-2-控制紧接浮动的排列-’clear’属性"><a href="#9-5-2-控制紧接浮动的排列-’clear’属性" class="headerlink" title="9.5.2 控制紧接浮动的排列:’clear’属性"></a>9.5.2 控制紧接浮动的排列:’clear’属性</h4><p><strong>‘clear’ </strong><br>值：   none | left | right | both | inherit<br>初始值：   none<br>适用于：   块级元素<br>可否继承：   否<br>百分比：   N/A<br>媒介：   图形</p>
<p>该属性表明一个元素的盒的哪一边不可以和一个先前的浮动盒相邻.’clear’属性不考虑在元素自身或者在其它<a href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting" target="_blank" rel="noopener">块格式化上下文</a>里面的浮动</p>
<p>当应用于非浮动的块盒时，取值的含义如下：</p>
<p><strong>left </strong><br>要求盒的顶部border的边缘低于早在源文档中形成的任何左浮动盒子的的底部外缘.<br><strong>right </strong><br>要求盒的顶部border的边缘低于早在源文档中形成的任何右浮动盒子的的底部外缘.<br><strong>both </strong><br>要求盒的顶部border的边缘低于早在源文档中形成的任何左浮动盒子和右浮动盒子的的底部外缘.<br><strong>none </strong><br>对考虑到浮动后的盒的位置没有约束.</p>
<p>值除了’none’潜在地引入间隙,间隙阻止margin重叠并充当一个元素的margin-top上面的间隔,它用来推动元素垂直地越过浮动。</p>
<p>计算设置clear元素的间隙是通过先确定假设元素的顶部边框的边缘的位置.这个位置是当元素的’clear’属性值为’none’时顶部border边缘所在的位置.</p>
<p>如果元素顶部border边缘假定的位置没有越过相关的浮动,那么间隙引入进来,margin的重叠由 8.3.1的规则决定.</p>
<p>间隙的总数设置为较大者:<br>1.总数必须放置块的border边缘和最下面被清除的浮动bottom外边缘.<br>2.在水平位置总数必须放置顶块的border边.<br>作为一中选择,间隙确切的设置必须的数量来放置块的border边甚至和被清除的最底的浮动的底部外边缘.<br><em><strong> 注意</strong>:两个行为都允许对存在网页内容的兼容性进行不定求值(pending evaluation).未来的CSS规范将要求其中一个或者其它.</em><br>注意:间隙可以是负数或0.</p>
<p>例 1.假定(为了简单),我们只有3个盒子,在这个规则中:块B1和有bottom margin M1(B1没有子内容没有padding或者border),浮动块F有height H,且块B2带有top margin M2(没有padding或者border,没有子内容).B2的’clear’设置为’both’.我们同样假设B2不为空.</p>
<p>不考虑B2的’clear’属性,我们有下面图表的情形.B1和B2的margin重叠.我们说B1的底border边在y=0的位置.然后,F的顶部在y=M1的位置,B2的顶border边在y=max(M1,M2),F的底部在 y = M1 + H.</p>
<p><img src="http://www.w3.org/TR/CSS21/images/clearance.png" alt="Float F extends into the margin above M2."></p>
<p>我们同样假设B2不在F下面,也就是,我们在规范描述的情形中,我们需要添加清除.那意味着:</p>
<p>max(M1,M2) &lt; M1 + H</p>
<p>我们需要计算清除C两次,C1和C2,并保留两者中的最大值:C=max(C1,C2).第一种方式是让B2的顶部和F的底部齐平,也就是在 y = M1 + H.那意思是,因为使用了清除它们之间的margin不再重叠:</p>
<p>bottom of F = top border edge of B2 ⇔</p>
<p>M1 + H = M1 + C1 + M2</p>
<p>C1 = M1 + H - M1 - M2</p>
<p>= H - M2</p>
<p>第二种计算方式是保持B2的顶部不变,也就是在 y= max(M1,M2). 那意思是:</p>
<p>max(M1,M2) = M1 + C2 + M2 ⇔</p>
<p>C2 = max(M1,M2) - M1 - M2</p>
<p>我们假设max(M1,M2) &lt; M1 + H,其意味着:</p>
<p>C2 = max(M1,M2) - M1 - M2 &lt; M1 + H - M1 - M2 = H - M2 ⇒</p>
<p>C2 &lt; H - M2<br>且,由于C1 = H - M2,于是:</p>
<p>C2 &lt; C1</p>
<p>因此</p>
<p>C = max(C1,C2) = C1</p>
<p>例2.一个清除为负数情形下的例子,在这里清除是-1em.(假设没有元素有border和padding):</p>
<p>&lt;p style=”margin-bottom: 4em”&gt;<br>First paragraph.</p>
<p>&lt;p style=”float: left; height: 2em; margin: 0”&gt;<br>Floating paragraph.</p>
<p>&lt;p style=”clear: left; margin-top: 3em”&gt;<br>Last paragraph.</p>
<p>说明:没有’clear’,首个和末尾段落的margin将重叠,并且最后的段落的顶部border边将和浮动段落的顶部对齐.但是’clear’要求顶 border边在浮动下面.也就是降低2em.这个意思是空隙必须引入.相应地,margin不再重叠且空隙的总数设置结果是clearance + margin-top = 2em,也就是clearance = 2em - margin-top = 2em - 3em = -1em.</p>
<p>当属性设置在浮动元素上,它导致该浮动定位<a href="http://www.w3.org/TR/CSS21/visuren.html#float-rules" target="_blank" rel="noopener">规则</a>的改变.一个额外的约束(#10)被添加:</p>
<ul>
<li>浮动的<a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" target="_blank" rel="noopener">顶部外边</a>必须低于所有之前的left-floating盒子(就’clear:left’来说)的底部外边,或者所有right-floating盒(就’clear: right’来说), 或者 both (‘clear: both’).<br><strong>注意:</strong>这个属性<a href="http://www.w3.org/TR/REC-CSS1#clear" target="_blank" rel="noopener">适用于所有 CSS1中元素</a>. 实现可以在所有元素上支持该属性.在CSS2和CSS2.1’clear’属性仅仅应用于块级元素.因此程序设计者应该只把该属性用在块 级元素上.如果一个实现支持内联元素的clear,而不是设置一个上面解释的清除,实现应该强制一个打断和有效的插入一个或多个空的行盒(或偏移新的行盒 向下就像<a href="http://www.w3.org/TR/CSS21/visuren.html#floats" target="_blank" rel="noopener">章节9.5</a>)来移动顶部的被清除内联行盒到各自的浮动盒下面.</li>
</ul>
<h3 id="9-6-绝对定位-Absolute-positioning"><a href="#9-6-绝对定位-Absolute-positioning" class="headerlink" title="9.6 绝对定位 Absolute positioning"></a>9.6 绝对定位 Absolute positioning</h3><p>在绝对定位模型中,一个盒子基于它的包含块而显式地偏移.它完全从常规流向中脱离(对后继的同胞没有影响).一个绝对定位盒为它的常规流向子元素和绝对地 定位(不是fixed)后代生成一个新的包含块.不过,绝对定位元素的内容不会在其它盒的周围排列.它们可能会也可能不会挡住另外一个盒子的内容(或者被 挡住),这取决于互相重合的盒的<a href="http://www.w3.org/TR/CSS21/visuren.html#stack-level" target="_blank" rel="noopener">堆叠层次</a>.</p>
<p>本规范中如果引用到一个绝对定位元素(或它的盒)隐含着该元素的’position’属性设置为’absolute’或’fixed’.</p>
<h4 id="9-6-1-固定定位-Fixed-positioning"><a href="#9-6-1-固定定位-Fixed-positioning" class="headerlink" title="9.6.1 固定定位 Fixed positioning"></a>9.6.1 固定定位 Fixed positioning</h4><p>固定定位是绝对定位的一个子类。唯一的区别是，对于固定定位盒子,它的包含块由<a href="http://www.w3.org/TR/CSS21/visuren.html#viewport" target="_blank" rel="noopener">视点</a>创建.对于<a href="http://www.w3.org/TR/CSS21/media.html#continuous-media-group" target="_blank" rel="noopener">连续媒介</a>,固定盒并不随着文档的滚动而移动.从这个意义上 说,它们类似于<a href="http://www.w3.org/TR/CSS21/colors.html#background-properties" target="_blank" rel="noopener">固定的背景图形</a>.对于<a href="http://www.w3.org/TR/CSS21/page.html" target="_blank" rel="noopener">页面媒介</a>,固定定位盒在每页里重复.需要在每一页底部放置一个签名时,这个方法很有用.</p>
<p>作者可以使用固定定位来创建类似框架的呈现.考虑如下的框架布局:</p>
<p><img src="http://www.w3.org/TR/CSS21/images/frame.png" alt="Image illustrating a frame-like layout with position="> <a href="http://localhost:8080/web/images/longdesc/frame-desc.html" title="Long description for frame layout example" target="_blank" rel="noopener">[D]</a></p>
<p>可以通过如下的HTML文档和样式表来达到这一效果:</p>
<p>&lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”&gt;<br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;A frame document with CSS2&lt;/TITLE&gt;<br>&lt;STYLE type=”text/css”&gt;<br>BODY { height: 8.5in } /<em> Required for percentage heights below </em>/</p>
<p>#header {<br>position: fixed;<br>width: 100%;<br>height: 15%;<br>top: 0;<br>right: 0;<br>bottom: auto;<br>left: 0;<br>}</p>
<p>#sidebar {<br>position: fixed;<br>width: 10em;<br>height: auto;<br>top: 15%;<br>right: auto;<br>bottom: 100px;<br>left: 0;<br>}</p>
<p>#main {<br>position: fixed;<br>width: auto;<br>height: auto;<br>top: 15%;<br>right: 0;<br>bottom: 100px;<br>left: 10em;<br>}</p>
<p>#footer {<br>position: fixed;<br>width: 100%;<br>height: 100px;<br>top: auto;<br>right: 0;<br>bottom: 0;<br>left: 0;<br>}<br>&lt;/STYLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;DIV id=”header”&gt; …  &lt;/DIV&gt;<br>&lt;DIV id=”sidebar”&gt; …  &lt;/DIV&gt;<br>&lt;DIV id=”main”&gt; …  &lt;/DIV&gt;<br>&lt;DIV id=”footer”&gt; …  &lt;/DIV&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/w3c标准/">w3c标准</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/翻译/">翻译</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e8-8e-b7-e5-8f-96n-e4-b8-aa-e4-b8-8d-e9-87-8d-e5-a4-8d-e9-9a-8f-e6-9c-ba-e6-95-b0-e7-9a-84-e4-b8-89-e7-a7-8d-e6-96-b9-e6-b3-95-three-methods-get-n-not-repeated-random-number" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/02/08/e8-8e-b7-e5-8f-96n-e4-b8-aa-e4-b8-8d-e9-87-8d-e5-a4-8d-e9-9a-8f-e6-9c-ba-e6-95-b0-e7-9a-84-e4-b8-89-e7-a7-8d-e6-96-b9-e6-b3-95-three-methods-get-n-not-repeated-random-number/" class="article-date">
  <time datetime="2011-02-07T16:08:20.000Z" itemprop="datePublished">2011-02-08</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a>►<a class="article-category-link" href="/categories/javascript-amp-Ajax/算法/">算法</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/02/08/e8-8e-b7-e5-8f-96n-e4-b8-aa-e4-b8-8d-e9-87-8d-e5-a4-8d-e9-9a-8f-e6-9c-ba-e6-95-b0-e7-9a-84-e4-b8-89-e7-a7-8d-e6-96-b9-e6-b3-95-three-methods-get-n-not-repeated-random-number/">获取n个不重复随机数的三种方法_Three methods get n+ not repeated random number</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>1.获取n个随机数，若n个随机数不相同，则赋值，否则使用递归继续调用该方法.</p>
<p>优化:若需要由小到大，先判断各个数互不相等，再赋值，若相等则进行递归(概率会很小)</p>
<p>2.声明一个array 包含元素[0…9]，然后随机生成一个中间值4-6,然后加上一个生成的合理随机值保证排除之前生成值.</p>
<p>3.用一个方法来专门生成值并使其和上一个值不同</p>
<p>var a = genTwoRandomNumber();<br>alert(a);<br>function genTwoRandomNumber(){<br>//var arr = addRandomNum(2);<br>var arr = genTwoRandomNumber();<br>return ‘’+arr[0]+arr[1];<br>}</p>
<p>//add a new not repeat array element<br>function addSeed(arr){<br>var seed = Math.floor(Math.random()*10);<br>var index = arr.indexOf(seed);<br>if(index&lt;0){<br>arr.push(seed);<br>}else{<br>addSeed(arr);<br>}<br>}</p>
<p>//genarate a new number and digital is set by user<br>function addRandomNum(size){<br>var arr = [];<br>var seed = Math.floor(Math.random()*10);<br>if(size&gt;0){<br>for(var i =0;i&lt;size;i++){<br>addSeed(arr);<br>}<br>arr.sort();<br>return arr;<br>}<br>}</p>
<p>//use the recursion as default method<br>function genTwoRandomNumber(){<br>var result = ‘’;<br>var temp1 = String(Math.floor(Math.random()<em>10));<br>var temp2 = String(Math.floor(Math.random()</em>10));<br>if(temp1!=temp2){<br>result = result+temp1+temp2;<br>}else{<br>result = genBox3RandomNumber();<br>}<br>return result;<br>}</p>
<p>function genTwoRandomNumber2(){<br>var result = ‘’;<br>var seed = Math.floor(Math.random()<em>10);<br>var temp1 = String(Math.floor(Math.random()</em>10));<br>var temp2 = String(Math.floor(Math.random()<em>10));<br>if(seed&lt;4){<br>var a = Math.floor(Math.random()</em>9+1);<br>}<br>return result;<br>}</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
    </footer>
  </div>
  


</article>
  
    <article id="post-e8-af-ad-e4-b9-89-e7-bd-91-e8-b7-af-e7-ba-bf-e5-9b-be-e8-af-91-e6-96-87-semantic-web-roadmap-translation" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/01/29/e8-af-ad-e4-b9-89-e7-bd-91-e8-b7-af-e7-ba-bf-e5-9b-be-e8-af-91-e6-96-87-semantic-web-roadmap-translation/" class="article-date">
  <time datetime="2011-01-29T06:04:09.000Z" itemprop="datePublished">2011-01-29</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/web-development/">web development</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/01/29/e8-af-ad-e4-b9-89-e7-bd-91-e8-b7-af-e7-ba-bf-e5-9b-be-e8-af-91-e6-96-87-semantic-web-roadmap-translation/">语义网路线图译文_Semantic Web Roadmap Translation</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>原文:<a href="http://www.w3.org/DesignIssues/Semantic.html" target="_blank" rel="noopener">http://www.w3.org/DesignIssues/Semantic.html</a></p>
<p>蒂姆伯.纳斯李<br>日期：1998年9月。 最后更新：$日期：1998/10/14 20点17分13秒$</p>
<p>现状：尝试给出语义万维网体系结构的高级计划。 编辑状态：草案。<br>欢迎评论</p>
<h2 id="Semantic-Web-Road-map-语义网路线图"><a href="#Semantic-Web-Road-map-语义网路线图" class="headerlink" title="Semantic Web Road map 语义网路线图"></a>Semantic Web Road map 语义网路线图</h2><p>一个为未来设计的路线图，一个除实验思想外未经过任何测试的架构计划。<br>它被要求从一个20000英尺的高度来编写,作为未来web设计路线图必须的一部分。它从架构的概览中拆分出来作为一个独立的部分且还需要更多的阐述而不是概述。<br>必然的，从一个20000英尺的高度，大的事物也会只有一个小的提及。它是一个架构，然而，在这个情形下，事物怎样按照希望的那样组合到一起，所以我们应该认识到它将进行缓慢的变化，这是一个变化的文档。<br>这个文档是一个计划，为实现一个web上数据互相连接的应用集合。并以这种方式形成一个一致的逻辑数据的web(语义网)。</p>
<h3 id="Introduction-简介"><a href="#Introduction-简介" class="headerlink" title="Introduction 简介"></a>Introduction 简介</h3><p>web被设计为信息空间，它的目标不仅仅是对人与人之间的交流有用，同时机器应该也能够参与进来并起到帮助作用。对此一个主要的障碍是现实中大多数 web上的信息专门提供给人们使用，即使它是由数据库驱动并有很好定义的方式（最起码在一定条件下）。数据的结构对一个浏览网页的机器人来说是不明显的。 撇开把机器训练得像人一样行动的人工智能问题，the Semantic Web approach instead develops  languages for expressing information in a machine processable  form(语义网致力于替代在一个机器过程形式中表达信息的开发语言).<br>这个文档给出一个路线图-一个增长的技术介绍序列(sequence)，它将带我们，一步步从今天的web到一个由机器推理并到处存在且极具威力的web.<br>它紧跟Web的架构记录(note)，其为已完成的数据定义存在的设计决议和原则.</p>
<h3 id="机器能理解的信息-语义网"><a href="#机器能理解的信息-语义网" class="headerlink" title="机器能理解的信息:语义网"></a>机器能理解的信息:语义网</h3><p>语义网是数据的web，在某些情况下就像全球的数据库。创建这样一个基础下部结构的基本原理随处可见[web未来讲话&amp;C]这里仅仅描述我所理解的架构??</p>
<h3 id="The-basic-assertion-model-基本的声明模型"><a href="#The-basic-assertion-model-基本的声明模型" class="headerlink" title="The basic assertion model 基本的声明模型"></a>The basic assertion model 基本的声明模型</h3><p>当看一个可能的统一web语义声明的算法,最低限度要求者需要的原则是它要基于一个非常通用的普通模型。仅当这个通用的模型生成任何预期的应用都能被映射的模型。这个生成模型就是Resource Description Framework(资源描述框架).</p>
<p>见:<a href="http://www.w3.org/TR/WD-rdf-syntax/" target="_blank" rel="noopener"><em>RDF Model and Syntax Specification</em></a></p>
<p>一般来说，这非常简单。简单到对模型本身你没有什么事情你能做除了堆叠很多东西在顶层。基本的模型仅仅包含一个声明(assertion)的观念,和一个 引用(quotation)的观念-做一个声明的声明。介绍这个是因为它以后将在任何地方都有需要且大多初始的RDF应用都是与数据(“元数据”)相关的 数据，在这里声明的声明是基础.即使是在逻辑之前(因为对目标应用的RDF而言，声明是一些资源描述的一部分，那些资源是一个隐含参数而声明作为一个资源 的属性).</p>
<p>就数学的发展而言，语言在这一点上没有否定或暗示，因此它的作用是有限的.给出一个事实的集合，对与一个给出的问题很容易说出一个证据是否存在,因为既不是这些事实也不是这些问题能有足够作用使得问题难以解决。</p>
<p>在这个层次上的应用有很多.大多的applications for the representation of  metadata(表示元数据的应用)在这个水平上能被RDF来操控.例子包括卡片索引信息(the Dublin  Core),私密信息(P3P),文档的关联样式表,知识产权标记(???)和PICS标记(照片分类).我们在这里讨论表示型数据,它简单而典型:因为 没有语言用来解释查询或推论规则.</p>
<p>RDF文档(documents)在这个层次上并没有巨大的威力.and sometimes it is less than evident why  one should bother to map an application in  RDF.答案是我们希望得到这个数据，有时候在一个应用中它是有限且简单的.之后，和其他应用的数据组合再进入web.运行在整个web的应用必须能够使 用一个通用的框架用来从所有其他应用中组合信息.例如:访问控制逻辑可能使用一个组合密码,组成员资格和数据类型信息来进行明确的允许访问或拒绝访问.查 询可能允许威力巨大的逻辑表达式关联到来自域名的私有的数据，且这些数据的表示语言并不是很有表现力的.这份文档的目的是展示部分可能已经发展了的计划. (???)</p>
<h3 id="The-Schema-Layer-架构-模式-层"><a href="#The-Schema-Layer-架构-模式-层" class="headerlink" title="The Schema Layer 架构(模式)层"></a>The Schema Layer 架构(模式)层</h3><p>RDF的基本模型允许我们在黑板上做很多事情,但却没有给我们很多工具.它给了我们一个声明和引用的模型，在模型上我们能够以任意新的格式来映射数据.<br>下一步我们需要一个Schema层来声明已经存在的新的属性.同时我需要多说几句(??).我们希望能够约束它使用的方式.典型地,我们想要约束它能应用 对象(object)的类型.这些元声明使得在一个文档做基本的检查成为可能.就像在SGML中”DTD”允许检查元素是否被用在适当的位置,因此在 RDF的Schema允许我们去检查，例如,一个开车人的驾照上有一个人的名字,而不是一个车的模型作为它的名字.<br>哪些原始的东西要介绍，更有作用的语言能被定义到这样层次还是下一层次,这些对我来说不是完全清楚的.在这个领域现在有一个RDF  Schema工作组(RDF Schema working group).Schema语言对合法的组合作简易的声明. 如果SGML  DTD用来作为模板，schema能够用在一个威力有限的语言中.在这个schema语言中约束很容易扩散到更具威力的逻辑表达式层(下一层结构),但在 这里我们为了限制能力，不这样做。例如:一个人可以说在一个schema中一个属性foo是唯一的,扩散后,对任意的x，如果y是x的foo，并且z是x 的foo，那么y等于z.这要使用在这一层上并不可用的逻辑表达式.但是只要schema语言由专门schema引擎来操控,而不是一个通用的推理引擎来 操控,那就没问题.</p>
<p>当我们用一种语言来处理这类事情-当然我认为这将会很常见-我们必须注意这种语言要有着良好逻辑定义。然后，我们可能想要在逻辑层写一些能理解schema语言语义的接口,并把它和其他逻辑信息组合到一起.</p>
<h3 id="Conversion-language-转化语言"><a href="#Conversion-language-转化语言" class="headerlink" title="Conversion language 转化语言"></a>Conversion language 转化语言</h3><p>一个命名空间工作的可演化性需求是必须和普通RDF的知识在同一层次上,能够根据规则将一个RDF schema中的文档(document)转换到另一个RDF schama当中(大概对如何处理有一个天生的理解).</p>
<p>根据最小能力原则，该语言可以在没有否定的情况下使用隐含关联(推论规则)(这似乎是一个好的特征，当事实上一个人能够很容易地写出一个规则来从另一个声 明B的一个声明A中定义推论，这实际上是假的,即使该语言没有一个实际的方式来表示”False”.无论如何,形式上该语言没有足够的必要去写一个驳论, 来方便一些人.紧接着,尽管这个语言更具表现力,我们不是依赖固有的能力去构造一个矛盾的声明,但是在应用上特别的限制详细文档的表现力.Schemas 提供一个方便的地方来描述那些限制条件.)<br><img src="http://www.w3.org/DesignIssues/diagrams/zipcode.png" alt=""><br>一个应用程序的例子，这一层当2个数据库被语义的链接连接,独立地构建然后被放到web上,且其允许在一个上面queries转换到另一个queries 上面.在这里，有人注意到”where”在friends表和”zip”在places表示同一个意思.另一些人注意到”zip”在places表 和”zip”在employees表中表示同一个事物,因此就像箭头表示的那样.给出这个信息,搜索任何一个employee名字叫Fred,zip为 02139能够扩展employees让其包含friends.所有的这些需要一些RDF的”equivalent”属性.</p>
<h3 id="The-logical-layer-逻辑层"><a href="#The-logical-layer-逻辑层" class="headerlink" title="The logical layer 逻辑层"></a>The logical layer 逻辑层</h3><p>紧接着,下一层是逻辑层.我们需要一些方法将逻辑写入到文档中来允许这样的事情,例如,从一个文档的另一个类型规定文档的一个类型的一个推论;一个 文档违反了自我约束规则的检查;一个把不知道的术语转化为知道的术语的query方案.假定我们已经在语言中有了引用，下一层应是谓词逻辑 (not,and,等等)再下一层是量化(quantification)(对所有的x,y(x)).</p>
<p>RDF的应用程序在这一层次上基本是很有限的仅仅靠的是想象.一个这一层次的简单例子是:当有两个数据库，互相独立，然后放到web上，再由语义的 links连接，它允许在一个上面的queries转化为另一上面的queries.Many things which may have  seemed to have needed a new language become suddenly simply a question  of writing down the right  RDF.当你有一个语言，其在对引用进行谓词演算方面有着超强的能力的时候，你需要为这个特定的应用定义一个心的语言,有两件事情要做:<br>一个是必须选定(限定)推理引擎的功能，接收器必须有，且定义一个能够被理解的完整RDF的子集;<br>一个是可能需要定义一些简单的功能在文档集合中的约束语言里有效率地传输表达式(One will probably want to  define some abbreviated functions to efficiently transmit expressions  within the set of documents within the constrained language. )</p>
<p>如果有疑问，见:<br><a href="http://www.w3.org/DesignIssues/RDFnot.html" target="_blank" rel="noopener">What the Semantic Web is not </a>- 常见问题解答<br>下面的metro   map展示了语义网里面的key循环.在web部分，在左边，展示了URI是什么，使用HTTP，转入一个文档的表示层作为一些MIME类型的bits字   符.它然后解析到XML再进入RDF，来生成一个RDF图，或在逻辑层,生成一个逻辑表达式.在右手边，语义的部分，展示了RDF图怎样包含这个URI的  一个引用.来自key的依赖，和文档里面包含的声明相结合，可以导致一个语义的web引擎解除另一个URI的引用.<br><img src="http://www.w3.org/DesignIssues/diagrams/loop.gif" alt=""></p>
<h3 id="Proof-Validation-a-language-for-proof-验证校验-校验语言"><a href="#Proof-Validation-a-language-for-proof-验证校验-校验语言" class="headerlink" title="Proof Validation - a language for proof 验证校验 - 校验语言"></a>Proof Validation - a language for proof 验证校验 - 校验语言</h3><p>RDF模型没有讲到推理引擎的形式,并且它是一个明显的问题,as there is no definitively perfect  algorithm for answering questions - or, basically, finding  proofs.眼下在语义网的开发里面，尽管，我们没有处理那个问题.大多数应用依照一些清晰的约束规则构建验证,并且所有其他部分需要做这个通用的验 证.这是很平常的.</p>
<p>例如,当一个人被允许访问一个网站,他们能够给出一个文件来向web服务器解释为什么他们有使用权.验证将会成为声明(assertions)和推 理规则的链(chain)[well,DAG]with pointers to all the supporting material.</p>
<p>同样的,事务(transactions)涉及到隐私信息，还有许多的电子商务.该文件通过网络发送将被写入一个完整的语言.然而,他们将会被约 束,因此，如果是queries,结果是可计算的,且在大多数情况下它们将会是proofs(验证)，HTTP”GET”将包含一个客户端有权限去响应的 验证.这个响应将有一个其本身是不是确实是被问到的问题的验证.</p>
<h3 id="Evolution-rules-Language-演化规则语言"><a href="#Evolution-rules-Language-演化规则语言" class="headerlink" title="Evolution rules Language 演化规则语言"></a>Evolution rules Language 演化规则语言</h3><p>RDF在逻辑层已经有能力去表达推理规则.例如,你应该能够说这样的事情”如果X机构的zipcode(邮政编码)是y，那么x的work- zipcode是y”.就像上面记录的，使用remarks(附注)来分散web，到最后将会很有趣.但在这简短的条款中不会产生可重复的结果除非我们限 制documents(文档)的表现来解决独有的应用问题.</p>
<p>两个基本的功能我们需要RDF引擎来完成:<br>1.对一个版本为n的实现要能够读取足够的RDF schema并能推断出怎么样读取版本为n+1的文档.<br>2.对独立于B类型应用且发展成熟的A类应用,它应该有相同或是相似的功能来读取和处理足够的schema信息，来处理来自B应用的数据.<br>(见<a href="http://www.w3.org/DesignIssues/Evolution.html" target="_blank" rel="noopener">evolvability article</a>)</p>
<p>RDF逻辑层作为一种语言对建立推理规则来说是足够的.注意它没有address(记录，标记)任何特别的推理引擎的heuristics(启发式过程/ 探索性的方法或过程)它是一个开放的领域通过语义网将会使其更加开放且富有成果(which which is an open field made  all the more open and fruitful by the Semantic  Web).换句话说，RDF将允许你写一些规则但不会告诉任何人在这个阶段哪个规则作用于他们.<br>例如，a library of congress schema talks of an “author”,和一个英国图书馆谈话的”创建者”,a  small bit of  RDF将能够说对任何人X和任何资源y,如果x是y的(LoC)作者,那么x是y的(BL)创建者.这是一类的规则，它可以用来处理可展开的问题.哪里有 一个处理器来找到它?在这个案例中其要找到版本为2的文档,然后这个版本为2的文档且要去找到规则去转化它并进入版本为1的文档,然后这个版本为2的 schema将自然地包含或指向这个规则.在这个案例中的可追溯文档材料的两个独立创建的schemas(In the case of  retrospective documentation of the relationship between two  independently invented  schemas),然后理所当然的，规则的指针能够添加到任何一个schema中,但如果那不(社会化)具有实用性,那么我们有另一个注解问题的例子.这 问题第三方索引能够解决,其能够搜索两个schemata之间的连接(connections).在实践的过程中,搜索引擎提供这项功能是很有效率地-你 将只需要问搜索引擎一个schema的所有关联并检查规则的结果哪些像这两个.</p>
<h3 id="Query-languages-查询语言"><a href="#Query-languages-查询语言" class="headerlink" title="Query languages 查询语言"></a>Query languages 查询语言</h3><p>还有一个查询语言.一个query可以被认为是一个返回的关于结果的断言(A query can be thought of as an  assertion about the result to be  returned).根本地,在任何情况下RDF在逻辑层足够去表现这个.然而,在实践中一个query引擎有特定的算法和索引能确定哪个起作用,并能回 答特定类别的query.</p>
<p>它可能在实践中开发一个词汇表,在以下两种方式中的任意一种中起到帮助:<br>1.它允许普通能力的query类型能够用较少页面的数学运算来简洁地表达,或<br>2.它允许包含约束的queries被表达,这很有趣因为它们包含可计算的属性.<br>SQL是都进行实现的一个例子.</p>
<p>将query语言定义到RDF逻辑的条款中明显是很重要的.例如,查询一个服务器上的一个资源的作者,one would ask for an  assertion of the form “x is the author of p1” for some  x.请求一个所有作者的限定list.将会找到一个作者的集合,这样任何作者都在这个集合里面,并且每个人在这个集合都是一个作者.如此等等.</p>
<p>在实践中,web上搜索引擎算法差异,和proof-finding 算法在pre-web逻辑系统建议语义网中应该有许多形式的代理来为不同形式的query提供答案.</p>
<p>One useful step the specification of specific query engines for for  example searches to a finite level of depth in a specified subset of the  Web (such as a web site).当然对不同的场景可能有几个可选的(结果).</p>
<p>另一个metastep是query引擎描述语言的规范–基本上一个query集合的规范这个引擎能以一个普通的方式返回.This would  open the door to agents chaining together searches and inference across  many intermediate engines.</p>
<h3 id="Digital-Signature-数字签名"><a href="#Digital-Signature-数字签名" class="headerlink" title="Digital Signature 数字签名"></a>Digital Signature 数字签名</h3><p>公共密钥密码学是一个非凡的科技它完全改变了什么是可能的.当一个人能添加一个数字签名块作为一个已存在文档的修饰，尝试去给推理系统添加信任(trust)的逻辑通常受到系统的限制.由于能给帐号添加信任,通用的逻辑模块需要扩展来包含已签名的声明的key.</p>
<p>就像所有的逻辑,这个的基本原理,一开始可能不是十分吸引人除非我们看到建立在它上层的东西.这个基础部分是keys的介绍,其作为一级类别的objects(在那里URI能够作为一个公共key的字面值)，和一个普通推理关于keys的声明属性的介绍.</p>
<p>在一个实现中,这意味着那个推理引擎将需要绑定到签名验证系统.文档将被解析不仅仅进入到声明树,但会进入到关于谁签名了哪个声明的声明树.对推理规则来说,验证校验将检查逻辑,但对于声明一个文档已经签名了,会检查签名.</p>
<p>结果将会是一个系统,其能够通过整个范围的基于安全和信任系统的public-key表达和推论关系.</p>
<p>当RDF对存在验证语言层发展成熟数字签名就变得有趣了,在许多地方它可以和RDF并行发展.</p>
<p>在W3C,进入数字签名工作来自许多方向,包含DSig1.0签署”pics”标签,还有各种各样的数位签署的文件的submissions.</p>
<h3 id="Indexes-of-terms-条款索引"><a href="#Indexes-of-terms-条款索引" class="headerlink" title="Indexes of terms 条款索引"></a>Indexes of terms 条款索引</h3><p>现给出一个全球的语义网声明,当前的搜索引擎技术(1998)应用与HTML页面将可能转化到索引而不是单词.但其由RDF 对象(objects)组成.这将允许更加高效的web搜索好像它是一个巨大的数据库,而不是一个巨大的书.</p>
<p>现在碰到版本A转化到版本B的需求,因此当两个数据库存在大批的(可能是虚拟的)RDF文件,甚至是初始的schemas可能没有一样的,一个关于它们等值的可追溯文档材料将允许一个搜索引擎通过跨数据库搜索来满足queries.</p>
<h3 id="Engines-of-the-Future-未来的引擎"><a href="#Engines-of-the-Future-未来的引擎" class="headerlink" title="Engines of the Future 未来的引擎"></a>Engines of the Future 未来的引擎</h3><p>当搜索引擎索引HTML页面找到许多搜索答案并覆盖大部分的web网络,然后它会返回许多不适合的答案.这样的搜索结果是没有”准确性”可言的.形 成对比的,逻辑引擎典型特点是能够通过限制输出来确定哪个是可验证的正确答案,但遭受通过搜索大量纠缠的数据去构造有效的答案的低效.”组合爆炸式搜索” (combinatorial explosion)的可能性跟踪起来已经相当棘手.</p>
<p>然而,规模(scale)上,哪个搜索引擎已经成功可能促使我们去重新检查我们的设想.如果一个未来的引擎将一个推理引擎和一个搜索引擎结合.它可以给出 两者(两个世界)中的最好(结果),and actually be able to construct proofs in a certain  number of cases of very real  impact.它将延伸到索引(indexs),而索引包含一个给出条款的所有事件的完整列表(lists),然后使用逻辑排除无用的indexs,留下 可以用来解决给出的问题的部分.</p>
<p>因此,没有东西会使得”组合式爆炸”(combinatorial  explosion)消失,许多现实生活中的问题能通过几步推理就能够在原始的web上解决,the rest of the reasoning  being in a realm in which proofs are  give,或者有一些约束(constrains)能很好地理解可计算的算法.我同样期望一些(string)商业的刺激来开发引擎和算法,这将有效地解 决具体类型的问题.这可能涉及到生成和今天的搜索引擎的索引(indexs)非常类似的中间结果缓存.<br>尽管仍然没有一个机器能够保证能回到任意的问题,回答实际问题的能力在我们日常生活尤其是商业活动中或许已经相当出色了.</p>
<p>在这个系列:</p>
<ul>
<li><a href="http://www.w3.org/DesignIssues/RDFnot.html" target="_blank" rel="noopener">What the Semantic Web is not</a> - 回答一些常见的值得怀疑的问题.</li>
<li><a href="http://www.w3.org/DesignIssues/Evolution.html" target="_blank" rel="noopener">Evolvability</a>: 语言的性质技术的演进</li>
<li><a href="http://www.w3.org/DesignIssues/Architecture.html" target="_blank" rel="noopener">Web Architecture from 50,000 feet</a></li>
</ul>
<h3 id="References-参考文献"><a href="#References-参考文献" class="headerlink" title="References 参考文献"></a>References 参考文献</h3><p><a href="http://www.cyc.com/tech.html#cycl" target="_blank" rel="noopener">The CYC Representation Language</a></p>
<p><a href="http://logic.stanford.edu/kif/kif.html" target="_blank" rel="noopener">Knowledge Interchange Format (KIF) </a><br>@@<br>致谢<br>这个计划基于和W3C团队,W3C成员公司的商讨.同样感谢MIT/LCS(美国麻省理工学院计算机实验室)的 David Karger 和 Daniel Jackson.</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/w3c标准/">w3c标准</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/翻译/">翻译</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/语义网/">语义网</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e8-87-aa-e6-89-a7-e8-a1-8c-e5-87-bd-e6-95-b0-e7-9a-84-e5-ad-a6-e4-b9-a0-study-self-invoking-function" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/01/27/e8-87-aa-e6-89-a7-e8-a1-8c-e5-87-bd-e6-95-b0-e7-9a-84-e5-ad-a6-e4-b9-a0-study-self-invoking-function/" class="article-date">
  <time datetime="2011-01-27T05:05:52.000Z" itemprop="datePublished">2011-01-27</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/web-development/">web development</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2011/01/27/e8-87-aa-e6-89-a7-e8-a1-8c-e5-87-bd-e6-95-b0-e7-9a-84-e5-ad-a6-e4-b9-a0-study-self-invoking-function/">自执行函数的学习_study self-invoking function</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>JavaScript  中的自执行函数让我感到很奇怪，因为对于一个在解析期间就自己进行执行的这样一个特性，我从程序原理的角度怎么也看不明白，为了搞个清楚这个问题花了不少 时间，最后问题如下：1.自执行函数是匿名函数吗？2.匿名函数与函数式编程的关系是什么？3.匿名函数与lampda表达式有什么联 系？4.JavaScript 函数式编程实现？</p>
<p>之前有问过<a href="http://winter-cn.cnblogs.com/" target="_blank" rel="noopener">winter</a>和<a href="http://catchen.biz/" target="_blank" rel="noopener">catchen</a>，他们有讲到js语言不是lampda表达式的一个实现,完全基于lampda的语言是lisp，而自执行函数的特性实现是由js引擎来完成的，这个应该是js语言的编译原理相关的东西。</p>
<p>今天看wiki的时候发现点新东西：<br>an <strong>anonymous function</strong> is a <a href="http://en.wikipedia.org/wiki/Function_%28mathematics%29" title="Function (mathematics)" target="_blank" rel="noopener">function</a> (or a <a href="http://en.wikipedia.org/wiki/Subroutine" title="Subroutine" target="_blank" rel="noopener">subroutine</a>)  defined, and possibly called, without being <a href="http://en.wikipedia.org/wiki/Name_binding" title="Name binding" target="_blank" rel="noopener">bound</a> to an <a href="http://en.wikipedia.org/wiki/Identifier" title="Identifier" target="_blank" rel="noopener">identifier</a>.</p>
<p>Anonymous functions originate in the work of <a href="http://en.wikipedia.org/wiki/Alonzo_Church" title="Alonzo Church" target="_blank" rel="noopener">Alonzo  Church</a> in his invention of the <a href="http://en.wikipedia.org/wiki/Lambda_calculus" title="Lambda calculus" target="_blank" rel="noopener">lambda calculus</a> in 1936 (prior to electronic computers),  in which all functions are anonymous. The <a href="http://en.wikipedia.org/wiki/Y_combinator" title="Y combinator" target="_blank" rel="noopener">Y combinator</a> can be utilised in these  circumstances to provide <a href="http://en.wikipedia.org/wiki/Anonymous_recursion" title="Anonymous recursion" target="_blank" rel="noopener">anonymous recursion</a>, which Church  used to show that some mathematical questions are unsolvable by  computation.<br>Anonymous functions have been a feature of programming languages since Lisp in 1958.<br>匿名函数是一个定义的函数(或子程序)，可被调用，但不和一个标识符(引用)绑定。匿名函数起源于Alonzo   Church在1936年研究的lambda  演算，在其中所有的函数都是匿名的.而Y组合子(高阶函数计算其他函数的不动点)可以利用匿名函数来进行匿名递归,Church用它来演示一些无法用计算 来解决的数学问题.<br>匿名函数自1958年的lisp出现后成为编程语言的一个特征.</p>
<p>1.那么自执行函数是匿名函数吗？<br>由其定义来看的确是，且在javascript中自执行函数是用来分割作用域的，并且在程序中只需要运行一次的函数完全可以写成自执行函数，再者自执行函数也可以被引用。</p>
<p>2.再来看第二个问题，匿名函数与函数式编程的关系？<br>因为<strong>函数式编程</strong> 以λ演算为基础，但λ演算的函数可以接受函数当作输入（引数）和输出（传出值）。所以很必然的一个条件就是函数可以非常的随意，所以可以认为匿名函数的使用是函数式编程的必须条件。或者说没有匿名函数就没有函数式编程？</p>
<p>3.匿名函数与lampda表达式有什么联系？<br>lampda演算是数学理论，wiki上已经讲了，所以三者的关系应该是 lampda -&gt; 匿名函数  -&gt;  函数式编程.<br>及运用匿名函数这个方式来将lampda 演算 进行编程语言的实现。</p>
<p>4.JavaScript 函数式编程实现？<br>JavaScript 是函数编程语言吗？不是。纯函数式编程语言没有变量的概念，一切都是函数和递归。javascript是动态语言，动态语言有函数式编程的特性。所以它可以实现lampda演算。所以自执行函数是js函数式编程的特征体现？</p>
<p>花了一大把功夫，最后补了一点基础，留一个问题：自执行函数的运行时环境？(或者讲自执行函数的执行原理)</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/编程/">编程</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/语言/">语言</a></li></ul>

    </footer>
  </div>
  


</article>
  
  
    <nav id="page-nav">
      <a class="extend prev" rel="prev" href="/page/9/">&laquo; Prev</a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/8/">8</a><a class="page-number" href="/page/9/">9</a><span class="page-number current">10</span><a class="page-number" href="/page/11/">11</a><a class="page-number" href="/page/12/">12</a><a class="page-number" href="/page/13/">13</a><a class="extend next" rel="next" href="/page/11/">Next &raquo;</a>
    </nav>
  
</section>
        
          <aside id="sidebar">
  
    <div class="widget-wrap">
  <h3 class="widget-title">Github</h3>
  <div class="widget">
    <ul class="category-list"><li class="category-list-item"><a href="https://github.com/rainzhai">https://github.com/rainzhai</a></li></ul>
  </div>
</div>

  <div class="widget-wrap">
    <h3 class="widget-title">分类 Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a><span class="category-list-count">29</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/html5/">html5</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/">web development</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/blog/">blog</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/">computer science</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/java-web/">java web</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/web-development/">web development</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/算法/">算法</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/html5/">html5</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/">hybrid</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/phonegap/">phonegap</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/java-web/">java web</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">23</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/web-development/">web development</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/算法/">算法</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/jquery/">jquery</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/php/">php</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/web-development/">web development</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/">智趣</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/游戏/">游戏</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/生活/">生活</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/未分类/">未分类</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/模块化/">模块化</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/游戏/">游戏</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/生活/">生活</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/资源/">资源</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签 Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Angularjs/">Angularjs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS-3/">CSS 3</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/D2/">D2</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DIY/">DIY</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Design/">Design</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Structure/">Structure</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/android/">android</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/app/">app</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/blog/">blog</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css3/">css3</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/debug/">debug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/dojo/">dojo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/easy-ui/">easy ui</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/firefox/">firefox</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/flash/">flash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/free-hosting/">free hosting</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/game/">game</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/geekTime/">geekTime</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html5/">html5</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hybrid/">hybrid</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ie/">ie</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ios/">ios</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">28</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery-mobile/">jquery mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jsp/">jsp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mobile/">mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/photos/">photos</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/php/">php</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/requirejs/">requirejs</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seam/">seam</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/svg/">svg</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/threejs/">threejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ued/">ued</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/w3c标准/">w3c标准</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/web/">web</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webapp/">webapp</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webgl/">webgl</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpage/">webpage</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/wordpress/">wordpress</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/上下文/">上下文</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分享/">分享</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端-Javascript-css-ES6/">前端 Javascript css ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习/">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能/">性能</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/总结/">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/效率/">效率</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/模块化/">模块化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/游戏/">游戏</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/理论/">理论</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/生活/">生活</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/社会化网络/">社会化网络</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动/">移动</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动端开发/">移动端开发</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/编程/">编程</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/美女/">美女</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/翻译/">翻译</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/范式/">范式</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/设计模式/">设计模式</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语义网/">语义网</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语言/">语言</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/资源/">资源</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/转载/">转载</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面向对象/">面向对象</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/风景/">风景</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云 Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Angularjs/" style="font-size: 10px;">Angularjs</a> <a href="/tags/CSS/" style="font-size: 19.09px;">CSS</a> <a href="/tags/CSS-3/" style="font-size: 13.64px;">CSS 3</a> <a href="/tags/D2/" style="font-size: 10px;">D2</a> <a href="/tags/DIY/" style="font-size: 10px;">DIY</a> <a href="/tags/Design/" style="font-size: 10.91px;">Design</a> <a href="/tags/Structure/" style="font-size: 16.36px;">Structure</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/app/" style="font-size: 10px;">app</a> <a href="/tags/blog/" style="font-size: 10.91px;">blog</a> <a href="/tags/bug/" style="font-size: 10px;">bug</a> <a href="/tags/css3/" style="font-size: 14.55px;">css3</a> <a href="/tags/debug/" style="font-size: 10px;">debug</a> <a href="/tags/dojo/" style="font-size: 10px;">dojo</a> <a href="/tags/easy-ui/" style="font-size: 10px;">easy ui</a> <a href="/tags/firefox/" style="font-size: 10px;">firefox</a> <a href="/tags/flash/" style="font-size: 10px;">flash</a> <a href="/tags/free-hosting/" style="font-size: 10px;">free hosting</a> <a href="/tags/game/" style="font-size: 10px;">game</a> <a href="/tags/geekTime/" style="font-size: 10px;">geekTime</a> <a href="/tags/html/" style="font-size: 13.64px;">html</a> <a href="/tags/html5/" style="font-size: 18.18px;">html5</a> <a href="/tags/hybrid/" style="font-size: 11.82px;">hybrid</a> <a href="/tags/ie/" style="font-size: 10.91px;">ie</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/java/" style="font-size: 17.27px;">java</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/jquery/" style="font-size: 15.45px;">jquery</a> <a href="/tags/jquery-mobile/" style="font-size: 10.91px;">jquery mobile</a> <a href="/tags/jsp/" style="font-size: 10px;">jsp</a> <a href="/tags/mobile/" style="font-size: 10.91px;">mobile</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/photos/" style="font-size: 10px;">photos</a> <a href="/tags/php/" style="font-size: 10px;">php</a> <a href="/tags/requirejs/" style="font-size: 10.91px;">requirejs</a> <a href="/tags/seam/" style="font-size: 10.91px;">seam</a> <a href="/tags/svg/" style="font-size: 10px;">svg</a> <a href="/tags/threejs/" style="font-size: 10px;">threejs</a> <a href="/tags/ued/" style="font-size: 10.91px;">ued</a> <a href="/tags/w3c标准/" style="font-size: 12.73px;">w3c标准</a> <a href="/tags/web/" style="font-size: 13.64px;">web</a> <a href="/tags/webapp/" style="font-size: 10.91px;">webapp</a> <a href="/tags/webgl/" style="font-size: 10px;">webgl</a> <a href="/tags/webpage/" style="font-size: 10.91px;">webpage</a> <a href="/tags/wordpress/" style="font-size: 11.82px;">wordpress</a> <a href="/tags/上下文/" style="font-size: 10px;">上下文</a> <a href="/tags/分享/" style="font-size: 10.91px;">分享</a> <a href="/tags/前端/" style="font-size: 16.36px;">前端</a> <a href="/tags/前端-Javascript-css-ES6/" style="font-size: 10px;">前端 Javascript css ES6</a> <a href="/tags/学习/" style="font-size: 10px;">学习</a> <a href="/tags/性能/" style="font-size: 12.73px;">性能</a> <a href="/tags/总结/" style="font-size: 10.91px;">总结</a> <a href="/tags/效率/" style="font-size: 11.82px;">效率</a> <a href="/tags/模块化/" style="font-size: 10.91px;">模块化</a> <a href="/tags/游戏/" style="font-size: 11.82px;">游戏</a> <a href="/tags/理论/" style="font-size: 14.55px;">理论</a> <a href="/tags/生活/" style="font-size: 10.91px;">生活</a> <a href="/tags/社会化网络/" style="font-size: 10.91px;">社会化网络</a> <a href="/tags/移动/" style="font-size: 10px;">移动</a> <a href="/tags/移动端开发/" style="font-size: 10px;">移动端开发</a> <a href="/tags/算法/" style="font-size: 13.64px;">算法</a> <a href="/tags/编程/" style="font-size: 18.18px;">编程</a> <a href="/tags/美女/" style="font-size: 10px;">美女</a> <a href="/tags/翻译/" style="font-size: 13.64px;">翻译</a> <a href="/tags/范式/" style="font-size: 12.73px;">范式</a> <a href="/tags/设计模式/" style="font-size: 11.82px;">设计模式</a> <a href="/tags/语义网/" style="font-size: 10px;">语义网</a> <a href="/tags/语言/" style="font-size: 19.09px;">语言</a> <a href="/tags/资源/" style="font-size: 10.91px;">资源</a> <a href="/tags/转载/" style="font-size: 10px;">转载</a> <a href="/tags/面向对象/" style="font-size: 10px;">面向对象</a> <a href="/tags/风景/" style="font-size: 10px;">风景</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">文章 Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">July 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">June 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">August 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">July 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">April 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/10/">October 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/09/">September 2013</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/03/">March 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/01/">January 2013</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/11/">November 2012</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/08/">August 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/06/">June 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/05/">May 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/04/">April 2012</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/02/">February 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/01/">January 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/12/">December 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/11/">November 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/10/">October 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/09/">September 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/08/">August 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/07/">July 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/06/">June 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/04/">April 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/02/">February 2011</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/01/">January 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/12/">December 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/11/">November 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/10/">October 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/09/">September 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/08/">August 2010</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/06/">June 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/04/">April 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/01/">January 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2009/08/">August 2009</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最近 Recents</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/07/23/nvm安装问题处理-nvm-is-not-compatible-with-the-npm-config-prefix-option-错误/">nvm安装问题处理 nvm is not compatible with the npm config prefix option 错误</a>
          </li>
        
          <li>
            <a href="/2018/06/06/前端知识体系大全/">前端知识体系大全</a>
          </li>
        
          <li>
            <a href="/2016/08/28/使用Angularjs开发控制台类项目/">使用Angularjs开发控制台类项目</a>
          </li>
        
          <li>
            <a href="/2016/07/11/Apicloud开发app的问题总结/">Apicloud开发app的问题总结</a>
          </li>
        
          <li>
            <a href="/2016/04/25/前端面试经典问题/">前端面试经典问题</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-wrap">
<h3 class="widget-title">友情链接 Links</h3>
<div class="widget">
<ul>
<li><a href="http://wande.me" title="玩的么" target="_blank">玩的么</a></li>
</ul>
</ul>
</div>
  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 宅鱼<br>
      更多游戏： <a href="http://wande.me"  target="_blank">玩的么</a><br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">文章</a>
  
    <a href="/raincss" class="mobile-nav-link">RainCSS</a>
  
</nav>
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"rainzhai"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->

<script type="text/javascript" src="http://wandeme.com/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F49ba6eabd43121d820d9120777bdaf30' type='text/javascript'%3E%3C/script%3E"));
</script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>